react-country-flag
TypeScript icon, indicating that this package has built-in type declarations

3.1.0 • Public • Published

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

Readme

Keywords

none

Package Sidebar

Install

npm i react-country-flag

Weekly Downloads

138,966

Version

3.1.0

License

MIT

Unpacked Size

22.9 kB

Total Files

15

Last publish

Collaborators

  • danalloway