React-country-state-city

React-country-state-city allows you to create a responsive country, state, city dropdown with search options.

Installation

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

Features

• Easy to set up for real, you can make it work in less than 1minute!
• Super easy to customize
• 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 !

The gist

1import {
2  CitySelect,
3  CountrySelect,
4  StateSelect,
5} from "react-country-state-city";
6import "react-country-state-city/dist/react-country-state-city.css";
7
8function App() {
9  const [countryid, setCountryid] = useState(0);
10  const [stateid, setstateid] = useState(0);
11  return (
12    <div>
13      <h6>Country</h6>
14      <CountrySelect
15        onChange={(e) => {
16          setCountryid(e.id);
17        }}
18        placeHolder="Select Country"
19      />
20      <h6>State</h6>
21      <StateSelect
22        countryid={countryid}
23        onChange={(e) => {
24          setstateid(e.id);
25        }}
26        placeHolder="Select State"
27      />
28      <h6>City</h6>
29      <CitySelect
30        countryid={countryid}
31        stateid={stateid}
32        onChange={(e) => {
33          console.log(e);
34        }}
35        placeHolder="Select City"
36      />
37    </div>
38  );
39}

City Example

State Example

Country Example

The Country Select Properties

Properties used to customise the rendering:

Name	Type	Description
defaultValue	Country	optional The current value: a country object
containerClassName	string	optional styles for a container
inputClassName	string	optional styles for input box
onChange	function	optional The current value: a country object.The argument is the country object
onTextChange	function	optional A callback fired when the input text changes.
placeHolder	string	optional Placeholder text displayed in empty input
showFlag	boolean	optional Flags are displayed when true and not displayed when false. default is true.

State Select Properties

The same country select properties and additionally

Name	Type	Description
countryid	number	required The id of the selected country object

City Select Properties

The same country select properties and additionally

Name	Type	Description
countryid	number	required The id of the selected country object
stateid	number	required The id of the selected state object

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

Become a financial contributor and help us sustain our community. Contribute

License

Licensed under MIT