react-country-list

This React library provides utility function and a custom react hooks to fetch country, state and city details

To Install the package use the following command

1
2npm i react-country-list
3

Get Country details using utility function

1import React, { useState, useEffect } from 'react';
2import { getAllCountries, Icountry, Istate } from 'react-country-list';
3
4const App = () => {
5  const [country, setCountry] = useState('');
6  const [countryList, setCountryList] = useState < Icountry > [];
7  const [stateList, setStateList] = useState < Istate > [];
8  useEffect(() => {
9    const countries = getAllCountries();
10    setCountryList(countries);
11  }, []);
12  useEffect(() => {
13    const states = getAllStatesAsync(country);
14    setStateList(states);
15  }, [country]);
16  const handleCountrySelect = () => {};
17  return (
18    <div>
19      <select>
20        <option>select country</option>
21        {countryList.map((country) => {
22          return (
23            <option key={country.name} onSelect={handleCountrySelect}>
24              {country.name}
25            </option>
26          );
27        })}
28      </select>
29    </div>
30  );
31};

Get Country details using Custom React Hook

1
2import { useGetCountry } from 'react-country-list';
3import {
4  SyntheticEvent,
5  useState,
6} from 'react';
7
8export function App() {
9  const [country, setCountry] = useState<string>('');
10  const [state, setState] = useState<string>('');
11  const [city, setCity] = useState<string>();
12  const { cityList, stateList, countryList } = useGetCountry({
13    country,
14    state,
15    city,
16  });
17  const handleCountryChange = (
18    e: SyntheticEvent<HTMLSelectElement>,
19    type: string
20  ) => {
21    const value = e.currentTarget.value;
22    if (type === 'country') setCountry(value);
23    if (type === 'state') setState(value);
24    if (type === 'city') setCity(value);
25  };
26  return (
27    <div>
28      <select
29        placeholder="select country"
30        onChange={(e: SyntheticEvent<HTMLSelectElement>) =>
31          handleCountryChange(e, 'country')
32        }
33      >
34        <option>select country</option>
35        {countryList.map((country) => {
36          return <option key={country.name}>{country.name}</option>;
37        })}
38      </select>
39      <select
40        placeholder="select state"
41        onChange={(e: SyntheticEvent<HTMLSelectElement>) =>
42          handleCountryChange(e, 'state')
43        }
44      >
45        <option>select state</option>
46
47        {stateList.map((state) => {
48          return <option key={state.name}>{state.name}</option>;
49        })}
50      </select>
51      <select
52        placeholder="select city"
53        onChange={(e: SyntheticEvent<HTMLSelectElement>) =>
54          handleCountryChange(e, 'city')
55        }
56      >
57        <option>select city</option>
58
59        {cityList.map((city) => {
60          return <option key={city.name}>{city.name}</option>;
61        })}
62      </select>
63    </div>
64  );
65}
66
67export default App;
68
69