react-country-region-select

This library offers a set of React elements that allow for displaying interlinked dropdown menus for countries(with flag/without flag) and regions (select a country, and it displays the corresponding regions)

Installation

1npm i react-country-region-select
2yarn add react-country-region-select

Basic Usage

It is highly user-friendly, however, do keep in mind that you will be required to keep track of the country and region values. This can be done either by storing them in your component's state or in a separate store. Below is a basic example that utilizes component state:

1import React, { Component } from 'react';
2import { RegionSelector, CountrySelector } from 'react-country-region-select';
3
4const App = () => {
5  const [country, setCountry] = useState('');
6  const [region, setRegion] = useState('');
7
8
9  return (
10  <CountrySelector
11    showCountryFlag
12          label="Select Country"
13      value={country}
14      onChange={setCountry}
15    />
16   <RegionSelector
17      label="Select Region"
18      country={country}
19      value={region}
20      onChange={setRegion}
21    />
22    )
23}
24
25export default App