{"id":11674,"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.","status":"active","version":"3.1.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","typescript"],"install":[{"cmd":"npm install react-country-flag","lang":"bash","label":"npm"},{"cmd":"yarn add react-country-flag","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-country-flag","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for rendering React components.","package":"react","optional":false}],"imports":[{"note":"The primary component is exported as a default export, not a named export. Importing with curly braces will lead to runtime errors.","wrong":"import { ReactCountryFlag } from 'react-country-flag'","symbol":"ReactCountryFlag","correct":"import ReactCountryFlag from 'react-country-flag'"},{"note":"For CommonJS environments, use `require()` to import the default export.","symbol":"ReactCountryFlag (CommonJS)","correct":"const ReactCountryFlag = require('react-country-flag')"},{"note":"Import the component's TypeScript prop types using `import type` for type-checking without bundling value imports.","wrong":"import { ReactCountryFlagProps } from 'react-country-flag'","symbol":"ReactCountryFlagProps","correct":"import type { ReactCountryFlagProps } from 'react-country-flag'"}],"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."},"warnings":[{"fix":"Replace `code=\"GB\"` with `countryCode=\"GB\"`.","message":"The prop `code` was renamed to `countryCode`. Using `code` will no longer work and may result in a TypeScript error or unhandled prop.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Add `title=\"United States\"` and/or `aria-label=\"United States\"` props directly to the `ReactCountryFlag` component for improved accessibility.","message":"The default `title` and `aria-label` attributes for accessibility were removed. Developers are now responsible for passing these props explicitly.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"Change `styleProps={{ fontSize: '2em' }}` to `style={{ fontSize: '2em' }}`.","message":"The prop `styleProps` was renamed to `style` to align with standard React prop naming conventions.","severity":"breaking","affected_versions":">=2.0.0"},{"fix":"For critical applications, consider explicitly using the `svg` prop (`<ReactCountryFlag countryCode=\"US\" svg />`) or implement client-side emoji support detection (e.g., using `detect-emoji-support`) to conditionally render SVG flags.","message":"Emoji flags (`svg` prop not used) may not display consistently across all browsers and operating systems due to varying emoji font support.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Change `import { ReactCountryFlag } from 'react-country-flag'` to `import ReactCountryFlag from 'react-country-flag'`.","cause":"Attempting to import `ReactCountryFlag` as a named export when it is a default export in the package.","error":"TypeError: (0 , react_country_flag__WEBPACK_IMPORTED_MODULE_2__.default) is not a function"},{"fix":"Update the prop from `code=\"US\"` to `countryCode=\"US\"`.","cause":"Using the deprecated `code` prop instead of the updated `countryCode` prop, which was a breaking change in v2.0.0.","error":"Property 'code' does not exist on type 'ReactCountryFlagProps'. Did you mean 'countryCode'?"},{"fix":"If using emoji flags, verify emoji support on the target system/browser or switch to SVG flags by adding the `svg` prop. If using SVG flags with a custom CDN, double-check that `cdnUrl` and `cdnSuffix` are correctly configured and accessible.","cause":"This often occurs when emoji flags are used on a system or browser that lacks sufficient emoji font support, or if there's an issue with the `cdnUrl` or `cdnSuffix` when using SVG flags.","error":"Flags are not showing up or appear as blank squares in the browser."}],"ecosystem":"npm"}