Find Similar Packages for react-country-flag
Search packages..
1 Year
react-country-flagSimilar Packages:
NPM Package Downloads Trend
Stat Detail
Package
Downloads
Stars
Size
Issues
Publish
License
react-country-flag173,389-22.9 kB-2 years agoMIT
Similar Npm Packages to react-country-flag

react-country-flag is a React component that allows developers to easily display country flags in their applications. It provides a simple and customizable way to include flags based on ISO 3166-1 alpha-2 country codes. This package is particularly useful for applications that require internationalization, user location identification, or any feature that benefits from visual country representation. With its lightweight design and straightforward API, react-country-flag makes it easy to enhance the user experience with recognizable country flags.

There are several alternatives to react-country-flag that also provide flag display capabilities:

  • react-flags is a React component that allows developers to render country flags using SVG images. It supports a wide range of flags and provides customization options for size and style. react-flags is a good choice if you want a straightforward implementation with the flexibility to adjust the appearance of the flags. Its focus on SVG ensures that the flags are scalable and look crisp on all screen sizes, making it suitable for modern web applications.

  • react-world-flags is another library that provides a way to display country flags in React applications. It offers a simple API and supports a variety of flags, making it easy to integrate into projects. react-world-flags is particularly useful for applications that need to display flags from around the world without the overhead of managing image assets manually. Its straightforward approach allows developers to quickly implement flag displays with minimal configuration.

To see how react-country-flag compares with react-flags and react-world-flags, check out the comparison: Comparing react-country-flag vs react-flags vs react-world-flags.

README for react-country-flag

react-country-flag

React component for emoji/svg country flags.

NPM JavaScript Style Guide

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

Terms & PrivacyProduct HuntJSON to TypeScriptCopilotChat for Web Dev