# react-country-flag

> > React component for emoji/svg country flags.

Latest version **3.1.0** (published 2023-03-31) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-country-flag
pnpm add react-country-flag
yarn add react-country-flag
bun add react-country-flag
```

## Health

**Score 30/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 3.1.0 |
| Published | 2023-03-31 |
| First published | 2017-08-03 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Node | >=12 |
| Dependencies | 0 |
| Unpacked size | 22.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Dan Alloway |
| Maintainers | danalloway |

## Links

- npm: https://www.npmjs.com/package/react-country-flag
- npm.io page: https://npm.io/package/react-country-flag

## Recent versions

- 3.1.0 (latest) — 2023-03-31
- 3.0.2 — 2021-11-21
- 3.0.1 — 2021-11-19
- 3.0.0 — 2021-11-19
- 2.3.1 — 2021-07-07
- 2.3.0 — 2020-08-03
- 2.2.0 — 2020-06-09
- 2.1.0 — 2020-05-09
- 2.0.1 — 2019-12-18
- 2.0.0 — 2019-12-18
- 1.1.0 — 2019-09-12
- 1.0.2 — 2019-02-18
- 1.0.1 — 2018-08-21
- 1.0.0 — 2018-08-21
- 0.3.1 — 2018-08-08
- … 14 more at https://npm.io/package/react-country-flag/versions

## README

# react-country-flag

> React component for emoji/svg country flags.

[![NPM](https://img.shields.io/npm/v/react-country-flag.svg)](https://www.npmjs.com/package/react-country-flag)
[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
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.

```jsx
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](https://github.com/danalloway)

---
_Source: https://npm.io/package/react-country-flag · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._