IPwidgetJS

What it looks like

Installation

Import using JSDelivr CDN

<script src="https://cdn.jsdelivr.net/gh/thenoobicat/ipwidgetjs@latest/dist/bundle.js"></script>

Install as a NodeJS Module

npm i ipwidgetjs

How to use

Vanilla HTML All you need to do is create a DIV with the class IP-WIDGET-JS.

<!-- The default width is 220px, and the default height is 80px. -->
<div class="IP-WIDGET-JS"></div>

React, NextJS and More You need to import the IPwidgetJS component.

import { IPwidgetJS } from "ipwidgetjs/react"

{/* The default width is 220px, and the default height is 80px. */}
<IPwidgetJS/>

🎉 All done!

You should see a widget with IP address and information about it such as the country and the ISP.

Customisation

You can customise the following attributes:

• Width
• Height
• Background Colour
• Information shown about the IP Address

With the React Component the following props are supported

<IPwidgetJS showIsp={true} showLatLong={true} showCity={true} width="220px" bg="#333333" height="85px"/>

Here's a list of all the classes that you can easily customise if you wish to do so

.ipwidgetjs-ip The heading that contains the users IP

.ipwidgetjs-info-isp The heading that contains the users ISP

.ipwidgetjs-info-descr-city The heading that contains the city of the user

.ipwidgetjs-country-flag The image of the users flag

.ipwidgetjs-info-descr-final The Latitude and Longitude of the user