Skip to main content

Country Blacklist

The blacklist prop omits those countries from the dropdown. This demo hides all countries starting with A. The values are found in the countryShortCode value in the source data package.

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

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

const CountryBlacklist = () => {
  const [country, setCountry] = useState('');
  const [region, setRegion] = useState('');
  const blacklist = useMemo(
    () => [
      'AF',
      'AX',
      'AL',
      'DZ',
      'AS',
      'AD',
      'AO',
      'AI',
      'AQ',
      'AG',
      'AR',
      'AM',
      'AW',
      'AU',
      'AT',
      'AZ',
    ],
    []
  );

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

export default CountryBlacklist;