Security News
Highlights from the 2024 Rails Community Survey
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
react-country-flag
Advanced tools
The react-country-flag npm package is a simple React component for displaying country flags. It provides an easy way to include SVG or emoji representations of country flags in your React applications.
Display SVG Flag
This feature allows you to display the SVG representation of a country's flag by specifying the country code and setting the 'svg' prop.
<CountryFlag countryCode="US" svg />
Display Emoji Flag
This feature allows you to display the emoji representation of a country's flag by specifying the country code without the 'svg' prop.
<CountryFlag countryCode="US" />
Custom Styles
This feature allows you to apply custom styles to the flag component by passing a style object.
<CountryFlag countryCode="US" style={{ width: '50px', height: '50px' }} />
Custom Class Names
This feature allows you to apply custom class names to the flag component for additional styling options.
<CountryFlag countryCode="US" className="custom-class" />
The react-world-flags package provides a similar functionality to react-country-flag, allowing you to display country flags in your React applications. It uses a different set of SVG assets and offers additional customization options.
The flag-icon-css package is a CSS library that provides country flag icons using CSS classes. It can be used in conjunction with React by applying the appropriate CSS classes to elements, but it does not offer a dedicated React component like react-country-flag.
The react-flagkit package offers a collection of SVG country flags as React components. It provides a similar set of features to react-country-flag, including support for custom styles and class names.
React component for emoji/svg country flags.
npm install --save react-country-flag
v3.x NONE only Typescript Types were introduced, enjoy!
v2.x has breaking changes
code
is now countryCode
title
and aria-label
are not defined any more, it is up to the developer
to pass these instyleProps
is now style
All props are passed onto the element, everything can be overwritten.
import React from "react"
import ReactCountryFlag from "react-country-flag"
function ExampleComponent {
return (
<div>
<ReactCountryFlag countryCode="US" />
<ReactCountryFlag
className="emojiFlag"
countryCode="US"
style={{
fontSize: '2em',
lineHeight: '2em',
}}
aria-label="United States"
/>
<ReactCountryFlag countryCode="US" svg />
<ReactCountryFlag
countryCode="US"
svg
style={{
width: '2em',
height: '2em',
}}
title="US"
/>
<ReactCountryFlag
countryCode="US"
svg
cdnUrl="https://cdnjs.cloudflare.com/ajax/libs/flag-icon-css/3.4.3/flags/1x1/"
cdnSuffix="svg"
title="US"
/>
</div>
)
}
export default ExampleComponent
Try this out and conditionally render your country flag https://github.com/danalloway/detect-emoji-support
MIT © danalloway
FAQs
> React component for emoji/svg country flags.
The npm package react-country-flag receives a total of 138,008 weekly downloads. As such, react-country-flag popularity was classified as popular.
We found that react-country-flag demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
A record 2,709 developers participated in the 2024 Ruby on Rails Community Survey, revealing key tools, practices, and trends shaping the Rails ecosystem.
Security News
In 2023, data breaches surged 78% from zero-day and supply chain attacks, but developers are still buried under alerts that are unable to prevent these threats.
Security News
Solo open source maintainers face burnout and security challenges, with 60% unpaid and 60% considering quitting.