Description:
A pretty cool country selector for React, built using Tailwind CSS and Framer Motion.
How to use it:
1. Import both country data and the country selector.
import { COUNTRIES } from './countries';
import { CountrySelector } from './selector';2. Add the country selector component to your app.
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}
/>
);
}Preview:
