React-country-state-city

React-country-state-city allows you to create a responsive country, state, city dropdown with search options. And also provide the option to create a language select dropdown to list all Languages.

Installation

$ npm install --save react-country-state-city
$ yarn add react-country-state-city

$ import {
  CitySelect,
  CountrySelect,
  StateSelect,
  LanguageSelect,
  RegionSelect,
  PhonecodeSelect
} from "react-country-state-city";

$ import "react-country-state-city/dist/react-country-state-city.css";

Features

• Easy to set up for real, you can make it work in less than 1minute!
• Super easy to customize
• Can also use it in your own custom UI.
• Autosuggest: a list of matching countries is displayed when the input text changes.
• Country data is provided, State data is provided based on given country id, City data is provided based on given country id and state id.
• Country flag icons.
• onChange and onTextChange callbacks.
• And much more !
• Language dropdown to list and search all languages in English and native too.
• Regions or Continents dropdown to list and search all the regions from the world.
• Phonecode dropdown to list and search all the codes based on country name or phone codes.

Data

By default, the control will load the github hosted data files. Alternatively, you can download the data json file and host it yourself. Simply download the JSON files, and supply the src property to each control to tell it where to download from.

The gist

Default

import {
  CitySelect,
  CountrySelect,
  StateSelect,
  LanguageSelect,
  RegionSelect,
  PhonecodeSelect
} from "react-country-state-city";
import "react-country-state-city/dist/react-country-state-city.css";

function App() {
  const [region, setRegion] = useState("");
  const [phonecode, setPhoneCode] = useState("");
  const [countryid, setCountryid] = useState(0);
  const [stateid, setstateid] = useState(0);
  return (
    <div>
      <h6>Region / Continent</h6>
       {
          setRegion(e.name);
        }}
        placeHolder="Select Region"
      /&gt;
      
      <h6>Country</h6>
       {
          setCountryid(e.id);
        }}
        placeHolder="Select Country"
        region={region}
      /&gt;
      <h6>All Country</h6>
       {
          setCountryid(e.id);
        }}
        placeHolder="Select Country"
      /&gt;
      <h6>Phone Code</h6>
       {
          setPhoneCode(e.phone_code);
        }}
        placeHolder="Select Phone Code"
      /&gt;
      <h6>State</h6>
       {
          setstateid(e.id);
        }}
        placeHolder="Select State"
      /&gt;
      <h6>City</h6>
       {
          console.log(e);
        }}
        placeHolder="Select City"
      /&gt;
      <h6>Language</h6>
       {
          console.log(e);
        }}
        placeHolder="Select Language"
      /&gt;
    </div>
  );
}

Custom

import {
  GetCountries,
  GetState,
  GetCity,
  GetLanguages,
  GetRegions,
  GetPhonecodes //async functions
} from "react-country-state-city";

function App() {
  const [region, setRegion] = useState("");
  const [countryid, setCountryid] = useState(0);
  const [stateid, setStateid] = useState(0);
  const [cityid, setCityid] = useState(0);
  const [language, setLanguage] = useState(0);
  const [phoneCode, setPhoneCode] = useState("");

  const [phonecodeList, setPhonecodeList] = useState([]);
  const [regionsList, setRegionsList] = useState([]);
  const [countriesList, setCountriesList] = useState([]);
  const [stateList, setStateList] = useState([]);
  const [cityList, setCityList] = useState([]);
  const [languageList, setLanguageList] = useState([]);

  useEffect(() => {
    GetPhonecodes().then((result) => {
      setPhonecodeList(result);
    });
    GetRegions().then((result) => {
      setRegionsList(result);
    });
    GetCountries().then((result) => {
      setCountriesList(result);
    });

    GetLanguages().then((result) => {
      setLanguageList(result);
    });
  }, []);
  return (
    <div>
      <h6>Region</h6>
      <select> {
          const _region = regionsList[e.target.value];
          setRegion(_region.name);
        }}
        value={region}
      &gt;
        {regionsList.map((item, index) =&gt; (
          <option value="{index}">
            {item.name}
          </option>
        ))}
      </select>
      <h6>Country</h6>
      <select> {
          const country = stateList[e.target.value]; //here you will get full country object.
          setCountryid(country.id);
          GetState(country.id).then((result) =&gt; {
            setStateList(result);
          });
        }}
        value={countryid}
      &gt;
        {countryList.map((item, index) =&gt; (
          <option value="{index}">
            {item.name}
          </option>
        ))}
      </select>
      <h6>Phone Code</h6>
      <select> {
          setRegion(e.target.value);
        }}
        value={phoneCode}
      &gt;
        {regionsList.map((item, index) =&gt; (
          <option value="{item.phone_code}">
            +{item.phone_code} - {item.name}
          </option>
        ))}
      </select>
      <h6>State</h6>
      <select> {
          const state = stateList[e.target.value]; //here you will get full state object.
          setStateid(state.id);
          GetCity(countryid, state.id).then((result) =&gt; {
            setCityList(result);
          });
        }}
        value={stateid}
      &gt;
        {stateList.map((item, index) =&gt; (
          <option value="{index}">
            {item.name}
          </option>
        ))}
      </select>
      <h6>City</h6>
      <select> {
          const city = cityList[e.target.value]; //here you will get full city object.
          setCityid(city.id);
        }}
        value={cityid}
      &gt;
        {cityList.map((item, index) =&gt; (
          <option value="{index}">
            {item.name}
          </option>
        ))}
      </select>
      <h6>Language</h6>
      <select> {
          setLanguage(e);
        }}
        value={language}
      &gt;
        {languageList.map((item, index) =&gt; (
          <option value="{item.id}">
            {item.name}
          </option>
        ))}
      </select>
    </div>
  );
}

City Example

GetCity - Result

[ { id: number; name: string; latitude: string; longitude: string; }, ... ]

State Example

GetState - Result

[ { id: number; name: string; state_code: string; latitude: string; longitude: string; }, ... ]

Country Example

GetCountries - Result

[ { id: number; name: string; iso3: string; iso2: string; numeric_code: string; phone_code: number; capital: string; currency: string; currency_name: string; currency_symbol: string; native: string; region: string; subregion: string; emoji: string; emojiU: string; tld: string; latitude: string; longitude: string; }, ... ]

Languages Example

GetLanguages - Result

[ { code: string; name: string; native: string; }, ... ]

Regions Example

GetRegions - Result

[ { id: string; name: string; }, ... ]

Phonecode Example

GetPhonecodes - Result

[ { id: string; name: string; region:string; phone_code:string; }, ... ]

The Country Select Properties

Properties used to customise the rendering:

State Select Properties

The same country select properties and additionally

City Select Properties

The same country select properties and additionally

The Language Select Properties

Properties used to customise the rendering:

Region Select Properties

The same country select properties

Phonecode Select Properties

The same country select properties

Demo

A demo is worth a thousand words

Contribute

Show your ❤️ and support by giving a ⭐. Any suggestions are welcome! venkatmcajj@gmail.com

Financial Contributors

Buy me a cup of coffee,

Binance Smart Chain or Ethereum - 0x7C6Bfb7f240f6028Fd2a0039924826eD8B879635

License

Licensed under MIT