Country-react-select

The Country State Select control for React.

Features include:

• Country picker.
• State picker.
• City picker.

Installation and usage

yarn add country-react-select

or

npm instal country-react-select --save

Sample code

Country picker:

1import React, { useState } from 'react';
2import {CountryPicker} from 'country-react-select';
3
4export default function App() {
5  const [selectedOption, setSelectedOption] = useState(null);
6  return (
7    <div className="App">
8      <CountryPicker
9        value={selectedOption}
10        onChange={setSelectedOption}
11      />
12    </div>
13  );
14}

CountryPickerProps

• isDisabled - disable the control
• isMulti - allow the user to select multiple values
• onChange - subscribe to change events
• placeholder - change the text displayed when no option is selected
• value - control the current value

State picker:

1import React, { useState } from 'react';
2import {StatePicker} from 'country-react-select';
3
4export default function App() {
5  const [selectedOption, setSelectedOption] = useState(null);
6  return (
7    <div className="App">
8      <StatePicker
9        value={selectedOption}
10        onChange={setSelectedOption}
11        country={'CA'}
12      />
13    </div>
14  );
15}

City picker:

1import React, { useState } from 'react';
2import {CityPicker} from 'country-react-select';
3
4export default function App() {
5  const [selectedOption, setSelectedOption] = useState(null);
6  return (
7    <div className="App">
8      <CityPicker
9        value={selectedOption}
10        onChange={setSelectedOption}
11        country={'CA'}
12        state={'QC'}
13      />
14    </div>
15  );
16}

License

MIT Licensed. Copyright (c) Vu Vo 2023.