ipwidgetjs
v1.2.8
Published
Display IP information in a beautiful widget
Downloads
39
Maintainers
Readme
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