react-country-super-picker

A lightweight React country picker component with flag display, search, and include/exclude filtering.

Installation

npm install react-country-super-picker react

Usage

import { CountryPicker } from "react-country-super-picker";

function Example() {
  return (
    <CountryPicker
      value="IN"
      onChange={(country) => console.log(country)}
      placeholder="Select a country"
    />
  );
}

Features

• Searchable country list
• SVG flag display with emoji fallback
• Include/exclude country filters
• Custom flag renderer support
• Configurable SVG flag URL via flagSvgUrl
• Flag width/height customization
• Value support for country name/label/code/dialCode

SVG flag customization

You can override the default SVG source per country with flagSvgUrl:

<CountryPicker
  value="US"
  onChange={(country) => console.log(country)}
  flagSvgUrl={(country) =>
    `https://flagcdn.com/${country.code.toLowerCase()}.svg`
  }
  flagWidth={20}
  flagHeight={14}
/>

Value support

The value prop can match by country code, name/label, or dial code.

• valueType="code" for country.code
• valueType="name" or valueType="label" for country.name
• valueType="dialCode" for country.dialCode
• omit valueType to auto-detect from the passed string

<CountryPicker value="IN" valueType="code" />
<CountryPicker value="India" valueType="label" />
<CountryPicker value="+91" valueType="dialCode" />