GeoData provider and hook for React

GeoDataProvider.tsx

import type { AppProps } from 'next/app';
import React from 'react';
import { useToggle } from 'react-use';

export const GeoDataContext = React.createContext({
  geoData: undefined as GeoData | undefined,
});

export interface GeoData {
  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: null;
  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;
}

export default function GeoDataProvider({ children }: AppProps['pageProps'] & any) {
  const [loading, setLoading] = useToggle(false);
  const [geoData, setGeoData] = React.useState<GeoData | undefined>();

  React.useEffect(() => {
    if (loading || geoData) {
      return;
    }
    setLoading(true);

    const fetchCountry = async () => {
      try {
        const response = await fetch('https://ipapi.co/json/');
        const data: GeoData = await response.json();
        setGeoData(data);
      } catch (error) {
        console.error('Error fetching geo:', error);
      }
      setLoading(false);
    };

    fetchCountry();
  }, [geoData, loading]);

  return <GeoDataContext.Provider value={{ geoData }}>{children}</GeoDataContext.Provider>;
}

useGeoData.tsx

import { useContext } from 'react';
import { GeoDataContext } from '../providers/GeoDataProvider';

export default () => useContext(GeoDataContext);