react-country-flag

What is react-country-flag?

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.

What are react-country-flag's main functionalities?

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" />

Other packages similar to react-country-flag

react-world-flags

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.

flag-icon-css

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.

react-flagkit

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.

README

react-country-flag

React component for emoji/svg country flags.

Install

npm install --save react-country-flag

BREAKING CHANGES

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 in
• styleProps is now style

Usage

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

Detecting Emoji support

Try this out and conditionally render your country flag https://github.com/danalloway/detect-emoji-support

License

MIT © danalloway