Searchable country selector for React – react-country-selector

Category: React React Form | September 18, 2021
Author: driaug
Official Page: Go to website
Last Update: September 18, 2021
License: MIT

react searchable country selector

Description:

If, you are looking for country selector for React with search feature then, you are at the right place. This component is built using Tailwind CSS.

How to install and use it?

1. Download and import the country selector component.

import { COUNTRIES } from './countries';
import { CountrySelector } from './selector';

2. Now, add the country selector component to your application. Like following:

const myPage = () => {
  const myRef = React.createRef<HTMLDivElement>();

  const [isOpen, setIsOpen] = useState(false);
  // Default this to a country's code to preselect it
  const [country, setCountry] = useState('AF');

  return (
    <CountrySelector
      id={'countries'}
      ref={myRef}
      open={isOpen}
      onToggle={() => setIsOpen(!isOpen)}
      onChange={val => setCountry(val)}
      // We use this type assertion because we are always sure this find will return a value but need to let TS know since it could technically return null
      selectedValue={COUNTRIES.find(option => option.value === country) as SelectMenuOption} 
    />
  );
}