React-country-state-city

A lightweight and easy-to-use React library that provides a comprehensive list of regions or continents, countries, states, cities, languages, and country phone codes for creating dynamic and searchable dropdowns. Ideal for building forms and input fields that require accurate and up-to-date geographical selections, with seamless integration for improved user experience.

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.

Documentation

Read Documentation

Financial Contributors

Buy me a cup of coffee,

Binance Smart Chain or Ethereum - 0x7C6Bfb7f240f6028Fd2a0039924826eD8B879635