IPInfo is a simple React context for fetching and storing IP and location information of a user. It uses ipify.org
to get the user's IP address and ipapi.co
to fetch detailed location data.
- Fetches user's IP address and location data
- Stores location data in local storage for faster access
- Automatically refetches data if IP address changes
- Provides a React context to access the fetched information
import IPInfo from 'ip-info-react';
function App() {
return <IPInfo>{/* Your application components */}</IPInfo>;
}
import { useContext } from 'react';
import { IPInfoContext } from 'ip-info-react';
function MyComponent() {
const userInfo = useContext(IPInfoContext);
// Access the fetched data
console.log(userInfo.ip);
console.log(userInfo.city);
console.log(userInfo.country_name);
return (
// Your component JSX
);
}
The userInfo object provided by the IPInfoContext contains the following properties:
type UserInfo = {
ip?: string;
network?: string;
version?: string;
city?: string;
region?: string;
region_code?: string;
country?: string;
country_name?: string;
country_code?: string;
country_code_iso3?: string;
country_capital?: string;
country_tld?: string;
continent_code?: string;
in_eu?: boolean;
postal?: string;
latitude?: number;
longitude?: number;
timezone?: string;
utc_offset?: string;
country_calling_code?: string;
currency?: string;
currency_name?: string;
languages?: string;
country_area?: number;
country_population?: number;
asn?: string;
org?: string;
};
Please note that some properties may be undefined if the data is not available.
- React