react-flags-select is a React library that provides highly customizable SVG flag components designed for selection interfaces and individual country flag display. It enables developers to integrate a dropdown-style country selector with features such as search, custom labels, blacklisting specific countries, and dynamic sizing. Additionally, it exports standalone SVG components for each country flag (e.g., `<Us />` for the United States), allowing for flexible display beyond the selector. The current stable version is 2.5.0, and the package ships with comprehensive TypeScript type definitions, enhancing development with type safety. Key differentiators include its fine-grained control over the displayed flag list, robust support for flexible custom labeling, and the provision of both a comprehensive selector component and individual flag SVGs, catering to diverse internationalization and country display needs within React applications. Its design focuses on ease of integration and customization.
npm install react-flags-selectVerified import paths — ran on the pinned version, not inferred.
This quickstart demonstrates the `ReactFlagsSelect` component with common props like `selected`, `onSelect`, `countries`, `placeholder`, `searchable`, and `customLabels` (showing both string and object formats). It also includes a basic example of displaying the flag for the currently selected country using a public API, illustrating a common use case alongside the primary selector.
Review your `customLabels` definitions. If you are providing an object, ensure it follows the `{ primary: string, secondary?: string }` structure. If you are using simple strings, ensure they are directly assigned to the country code key.Ensure you explicitly set `blacklistCountries={true}` if your `countries` array should function as an exclusion list rather than an inclusion list. Otherwise, `countries` will limit the selection to only those specified.Verify your project's `react` and `react-dom` versions meet the `react-flags-select` peer dependency requirements. Upgrade React if necessary; for example, `npm install react@^18 react-dom@^18` or `yarn add react@^18 react-dom@^18` for React 18.
Ensure the `countries` prop is always an array of strings, even if empty, e.g., `countries={[]}`. Do not pass `null` or `undefined`.For the main `ReactFlagsSelect` component, use `import ReactFlagsSelect from 'react-flags-select';`. For individual country flags (e.g., `Us`), use named imports: `import { Us } from 'react-flags-select';`.Ensure the `selected` prop is always provided to `ReactFlagsSelect` and its value is a string. Initialize your state variable (e e.g., using `useState('')`) to ensure it always holds a string value or a valid country code.Update your `customLabels` object to consistently use either string values (e.g., `{ US: 'United States' }`) or objects with `primary` and optional `secondary` fields (e.g., `{ US: { primary: 'United States', secondary: '+1' } }`). Ensure your types align with the package's definition for `customLabels` in the version you are using.