react-flagpack

Flagpack contains 250+ flag icons to easily use within your code project. Flagpack is an open source project and available for JavaScript frameworks/libraries React, Vue and Svelte.
. Made with love by Yummygum. Graphic showing a list with the flags of Argentina, Croatia, Estonia, Kenia, Netherlands, and Scotland.
View documentation on flagpack.xyz

react-flagpack

<img src="https://img.shields.io/npm/v/react-flagpack.svg?style=flat" />

<img src="https://img.shields.io/npm/dt/react-flagpack.svg?style=flat" />

<img src="https://img.shields.io/badge/Support-♥-E94AAA"  />

<img src="https://img.shields.io/twitter/follow/flagpack.svg?style=social&label=follow"  />

Flagpack for React is created using React v16.8. The Flagpack component has not been tested for compatibility with older versions of React.

Installation

$: npm install react-flagpack --save

Usage

Defining the component

Import the Flagpack component into any of your project's React components.

import Flag from 'react-flagpack'

Use in JSX

<Flag
  code="NL"
  gradient="real-linear"
  size="m"
  hasDropShadow
/>

Available component configurations — Props

| Key | Value | Required | Default | Format | |-------|-------|------|------|------| | code | String | false | 'NL' | See all codes | | size | String | false | 'L' | 'S', 'M' or 'L' | | className | String | false | - | - | | hasDropShadow | Boolean | false | false | - | | hasBorder | Boolean | false | true | - | | hasBorderRadius | Boolean | false | true | - | | gradient | String | false | '' | 'top-down', 'real-linear' or 'real-circular' |

Support

Frequently Asked Questions
Documentation

Releases

You can find a changelog of Flagpack's releases on the Releases page on GitHub.

Contribute

If you're interested in contributing to this project, great! Please see the contributing document how to set up you up.

License

Flagpack is an open source project published under a MIT license.