Skip to main content
Version: <=v1.1.11

Getting Started

Description​

info

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

Installation​

With npm:​

npm install react-country-state-city

With yarn:​

yarn add react-country-state-city

Usage​

import { CountrySelect } from "react-country-state-city";
import "react-country-state-city/dist/react-country-state-city.css";

Features​

  • ✅ Easy to set up – make it work in less than 1 minute!
  • ✅ Super easy to customize.
  • ✅ Can be integrated into your custom UI.
  • ✅ Autosuggest: a list of matching countries is displayed when the input text changes.
  • ✅ Country data, state data (based on country ID), and city data (based on country & state ID).
  • ✅ Country flag icons.
  • ✅ onChange and onTextChange callbacks.
  • ✅ Language dropdown with English and native language options.
  • ✅ Regions or Continents dropdown.
  • ✅ Phone code dropdown with search functionality.

Data​

By default, the control loads GitHub-hosted data files. Alternatively, you can download the data JSON files and host them yourself. Simply supply the src property to each control to specify where to download from.

Demo Project​

A demo is worth a thousand words! Check out the demo.

Contribute​

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

📧 Email: venkatmcajj@gmail.com

Financial Contributors​

Buy me a cup of coffee ☕

Binance Smart Chain / Ethereum Wallet: 0x7C6Bfb7f240f6028Fd2a0039924826eD8B879635

License​

Licensed under the MIT License.