User-friendly Country Selector For React

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:

User-friendly Country Selector For React

Download Details:

Author: driaug

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/driaug/react-country-selector

License: MIT

You Might Be Interested In:

Add Comment