Contents
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}
/>
);
}
The post Searchable country selector for React – react-country-selector appeared first on Lipku.com.