IPwidgetJS

What it looks like

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

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/>

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

You can customise the following attributes:

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