react-country-state-dropdown v1.1.1

react-country-state-dropdown

A responsive country, state, city, and language dropdown for React (and now a phone input too!)

Installation

npm install --save react-country-state-dropdown

or using yarn:

yarn add react-country-state-dropdown

Demo

View the live demo.

Screenshot

Usage

It's very simple to use. The state can be managed in a controlled or uncontrolled manner. Here we are showing an example of controlled usage by assigning an initial value and an onChange handler. Note that the <StateDropdown /> requires a country input in order to display states for the selected country. <CityDropdown /> requires both a country and a state, and it's generally a good idea to use the option allowFreeFormText to allow city entries that aren't prepopulated in the dropdown.

import React, { useState } from 'react';
import { CountryDropdown, StateDropdown, CityDropdown, LanguagesDropdown, PhoneInput } from "react-country-state-dropdown";

const Example = () => {
  const [country, setCountry] = useState(null);
  const [state, setState] = useState(null);
  const [city, setCity] = useState(null);
  const [language, setLanguage] = useState(null);
  const [phone, setPhone] = useState(null);

  const handleSetCountry = (e, value) => setCountry(value);
  const handleSetState = (e, value) => setState(value);
  const handleSetCity = (e, value) => setCity(value);
  const handleSetLanguage = (e, value) => setLanguage(value);
  const handleSetPhone = (e, value) => setPhone(value);

  return (
    <div>
      <CountryDropdown clearable value={country} onChange={handleSetCountry} />
      <StateDropdown clearable country={country} value={state} onChange={handleSetState} />
      <CityDropdown clearable allowFreeFormText country={country} state={state} value={city} onChange={handleSetCity} />
      <LanguageDropdown searchable value={language} onChange={handleSetLanguage} />
      <PhoneInput clearable country={country} value={phone} onChange={handleSetPhone} />
    </div>);
};

Data

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

Options

<Dropdown />

These attributes are common to all dropdowns. Rendering of the component is controllable for full customization.

<CountryDropdown />

<StateDropdown />

<CityDropdown />

<LanguageDropdown />

<PhoneInput />

Examples

Here's an example of all the typical options being used.

import React, { useState } from 'react';
import { CountryDropdown, StateDropdown, CityDropdown, LanguagesDropdown, PhoneInput } from "react-country-state-dropdown";

const Example = () => {
  const [country, setCountry] = useState('US'); // can set a default value using the ISO2 code instead of the full country object
  const [state, setState] = useState(null);
  const [city, setCity] = useState(null);
  const [language, setLanguage] = useState(null);
  const [phone, setPhone] = useState(null);

  const handleSetCountry = (e, value) => setCountry(value);
  const handleSetState = (e, value) => setState(value);
  const handleSetCity = (e, value) => setCity(value);
  const handleSetLanguage = (e, value) => setLanguage(value);
  const handleSetPhone = (e, value) => setPhone(value);

  return (
    <div>
      <CountryDropdown clearable searchable striped value={country} onChange={handleSetCountry} />
      <StateDropdown clearable searchable striped country={country} value={state} onChange={handleSetState} />
      <CityDropdown clearable searchable striped allowFreeFormText country={country} state={state} value={city} onChange={handleSetCity} />
      <LanguageDropdown clearable searchable striped value={language} onChange={handleSetLanguage} />
      <PhoneInput clearable country={country} value={phone} onChange={handleSetPhone} />
    </div>);
};

Example on loading the JSON data from your own hosted location, located in the publicly accessible custom-geo-data folder of your own server.

import React, { useState } from 'react';
import { CountryDropdown } from "react-country-state-dropdown";

const Example = () => {
  const [country, setCountry] = useState(null);

  const handleSetCountry = (e, value) => {
    setCountry(value);
    console.log(value);
  };

  return (
    <div>
      <CountryDropdown clearable searchable striped value={country} onChange={handleSetCountry} src="/custom-geo-data" />
    </div>);
};

How to output the full country information.

import React, { useState } from 'react';
import { CountryDropdown } from "react-country-state-dropdown";

const Example = () => {
  const [country, setCountry] = useState(null);

  const handleSetCountry = (e, value) => {
    setCountry(value);
    console.log(value);
  };

  return (
    <div>
      <CountryDropdown clearable searchable striped value={country} onChange={handleSetCountry} />
    </div>);
};

Produces the output:

{
    "id": 233,
    "name": "United States",
    "iso3": "USA",
    "iso2": "US",
    "numeric_code": "840",
    "phone_code": 1,
    "capital": "Washington",
    "currency": "USD",
    "currency_name": "United States dollar",
    "currency_symbol": "$",
    "tld": ".us",
    "native": "United States",
    "region": "Americas",
    "subregion": "Northern America",
    "latitude": "38.00000000",
    "longitude": "-97.00000000",
    "emoji": "🇺🇸",
    "value": "United States"
}

How to output the full state information.

import React, { useState } from 'react';
import { StateDropdown } from "react-country-state-dropdown";

const Example = () => {
  const [state, setState] = useState(null);

  const handleSetState = (e, value) => {
    setState(value);
    console.log(value);
  };

  return (
    <div>
      <StateDropdown country='CA' clearable searchable striped value={state} onChange={handleSetState} />
    </div>);
};

Produces the output:

{
    "id": 875,
    "name": "British Columbia",
    "code": "BC",
    "value": "British Columbia"
}

Utility Functions

There are many functions that can be called to retrieve data, or format phone numbers.

getCountries(): Get an array of all countries.

getStates(): Get an array of all state/provinces.

getCities(): Get an array of all cities (very large list, see getCitiesForState()).

getLanguages(): Get an array of all languages.

getCountry(country): Get a country by name, ISO code, numerical id or object

getState(state, country): Get a state by name, ISO code, numerical id or object, country must be specified.

getStatesForCountry(country): Get an array of all state/provinces for a specified country.

getCity(city, state, country): Get a city by name, numerical id, or object, state and country must also be specified.

getCitiesForState(state, country): List all cities by state and country

getLanguage(language): Get a language by name, native name or ISO code

parsePartialNumber(phoneNumber, countryCode): Parse a partial phone number

parsePhoneNumber(phoneNumber, countryCode): Parse a phone number

formatPhoneNumber(phoneNumber, countryCode): Format a phone number

formatInternational(phoneNumber, countryCode): Format a phone number as the international E.164 format

isValidPhoneNumber(phoneNumber, countryCode): Check if a phone number is of valid format

getCountriesForPhoneNumber(phoneNumber): Get the countries for a E.164 format phone number