{"library":"react-flags-select","title":"React Flags Select","description":"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-flags-select"],"cli":null},"imports":["import ReactFlagsSelect from 'react-flags-select';","import { Us } from 'react-flags-select';","import type { CountryCode } from 'react-flags-select';"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React, { useState } from \"react\";\nimport ReactFlagsSelect from \"react-flags-select\";\n\nfunction App() {\n  const [selectedCountry, setSelectedCountry] = useState<string>(\"US\");\n\n  return (\n    <div style={{ padding: \"20px\", fontFamily: \"sans-serif\", maxWidth: \"400px\", margin: \"auto\" }}>\n      <h1>Select Your Country</h1>\n      <p>Currently selected: <strong>{selectedCountry || \"None\"}</strong></p>\n      <ReactFlagsSelect\n        selected={selectedCountry}\n        onSelect={(code: string) => {\n          setSelectedCountry(code);\n          console.log(`Selected country code: ${code}`);\n        }}\n        countries={[\"US\", \"GB\", \"CA\", \"FR\", \"DE\", \"JP\", \"AU\", \"NG\"]}\n        placeholder=\"Select a country...\"\n        searchable\n        searchPlaceholder=\"Find a country...\"\n        customLabels={{\n          US: { primary: \"United States\", secondary: \"+1\" },\n          GB: { primary: \"United Kingdom\", secondary: \"+44\" },\n          FR: \"France\", // Mixed usage example\n          DE: \"Germany\",\n          CA: \"Canada\",\n          NG: { primary: \"Nigeria\", secondary: \"+234\" }\n        }}\n        className=\"menu-flags\" // Example of custom class for styling\n        selectedSize={18}\n        optionsSize={14}\n        fullWidth={false}\n      />\n\n      <div style={{ marginTop: \"30px\", fontSize: \"20px\", borderTop: \"1px solid #eee\", paddingTop: \"20px\" }}>\n        <h2>Individual Flag Display:</h2>\n        {selectedCountry ? (\n          <p>\n            Selected: <img src={`https://flagsapi.com/${selectedCountry}/flat/64.png`} alt={selectedCountry} style={{ verticalAlign: 'middle', marginRight: '8px' }} /> \n            ({selectedCountry})\n          </p>\n        ) : (\n          <p>Select a country above to see its flag here.</p>\n        )}\n        <p style={{ marginTop: \"15px\" }}>\n          Example: <img src={`https://flagsapi.com/JP/flat/64.png`} alt=\"Japan\" style={{ verticalAlign: 'middle', marginRight: '8px' }} /> \n          Japan (JP)\n        </p>\n      </div>\n    </div>\n  );\n}\n\nexport default App;\n\n// To integrate this in a typical React application, ensure your root rendering file (e.g., index.tsx)\n// renders the <App /> component. E.g.:\n// import React from 'react';\n// import ReactDOM from 'react-dom/client';\n// import App from './App';\n// const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);\n// root.render(<React.StrictMode><App /></React.StrictMode>);\n","lang":"typescript","description":"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}