Country Whitelist

The whitelist prop on the CountryDropdown component limits the listed countries to those that you specify. The values are found in the countryShortCode value in the source data package. Note the order will always be alphabetical.

Note that we memoize the whitelist prop to prevent unnecessary re-renders. See the notes on performance.

Select CountryCanadaUnited KingdomUnited States-

---

import React, { useMemo, useState } from 'react';
import { CountryDropdown, RegionDropdown } from 'react-country-region-selector';

const CountryWhitelist = () => {
  const [country, setCountry] = useState('');
  const [region, setRegion] = useState('');
  const whitelist = useMemo(() => ['GB', 'US', 'CA'], []);

  return (
    <>
      <CountryDropdown
        value={country}
        onChange={(val) => setCountry(val)}
        whitelist={whitelist}
      />
      <RegionDropdown
        country={country}
        value={region}
        onChange={(val) => setRegion(val)}
      />
    </>
  );
};

export default CountryWhitelist;