{"library":"react-country-flag","title":"React Country Flag Component","description":"The `react-country-flag` package provides a React component designed for displaying country flags, offering flexibility through both emoji and SVG renditions. Currently stable at version `3.1.0`, this library is actively maintained, with its latest major update (v3) primarily focusing on introducing comprehensive TypeScript type definitions, enhancing developer experience without breaking changes from the previous major version. Earlier, `v2.x` introduced several breaking changes related to prop naming and accessibility responsibilities, which developers upgrading from `v1.x` should be aware of. A key differentiator is its ability to choose between emoji or SVG rendering, with support for custom SVG CDN configurations, allowing for highly customizable and performant flag display. It passes all standard HTML attributes to the underlying element, providing full control over styling and accessibility. While supporting emoji flags, the library also acknowledges potential cross-platform display inconsistencies and implicitly encourages developers to consider emoji support detection or to leverage its robust SVG rendering capabilities for maximum compatibility.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-country-flag"],"cli":null},"imports":["import ReactCountryFlag from 'react-country-flag'","const ReactCountryFlag = require('react-country-flag')","import type { ReactCountryFlagProps } from 'react-country-flag'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import React from \"react\"\nimport ReactCountryFlag from \"react-country-flag\"\n\nfunction ExampleComponent() {\n    return (\n        <div>\n            <ReactCountryFlag countryCode=\"US\" />\n\n            <ReactCountryFlag\n                className=\"emojiFlag\"\n                countryCode=\"US\"\n                style={{\n                    fontSize: '2em',\n                    lineHeight: '2em',\n                }}\n                aria-label=\"United States\"\n            />\n\n            <ReactCountryFlag countryCode=\"US\" svg />\n\n            <ReactCountryFlag\n                countryCode=\"US\"\n                svg\n                style={{\n                    width: '2em',\n                    height: '2em',\n                }}\n                title=\"US\"\n            />\n\n            <ReactCountryFlag\n                countryCode=\"US\"\n                svg\n                cdnUrl=\"https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.3/flags/1x1/\"\n                cdnSuffix=\"svg\"\n                title=\"US\"\n            />\n        </div>\n    )\n}\n\nexport default ExampleComponent","lang":"typescript","description":"Demonstrates basic usage of the `ReactCountryFlag` component, showcasing both emoji and SVG rendering options, along with custom styling and accessibility attributes.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}