React

React

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

Getting started

1. Installing

Install Flagpack for React using NPM
You can also install Flagpack for React using Yarn.

2. Defining the component

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

Available component options — Props

Use props to alter the way the Flagpack component is displayed. Both the flag as well as styling options are defined through properties. Choose from following properties:

Key Value Required Default Format
code String true 'NL' See all codes
size String false 'L' 'S', 'M', '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'

Country codecode

The Flagpack component uses the following prop value to reference flags: a country's three letter code (ISO 3166-1 alpha-3), two letter code (ISO 3166-1 alpha-2) numeric code. For a full list of available countries and their corresponding codes see Flag Index.

Sizesize

The flag icons come in three predefined sizes: S (16*12px), M (20*15) and L (32*24 px). Each size has been custom designed to contain the right amount of detail for the sake of being recognizable.

Drop shadowhasDropShadow

The flag icons do not have a drop shadow by default. Setting hasDropShadow to true adds a subtle drop shadow, finetuned for each of the three predefined flag icon sizes [development/sizes].

BorderhasBorder

Each flag icon has an unobtrusive 1px border applied. Set hasBorder to false to turn off this border.

Border radius hasBorderRadius

By default Flagpack flag icons have a border radius set to match each of the three predefined flag icon sizes [development/sizes].

Gradientgradient

Flagpack flag icons don't have gradient by default. If you do want to add a gradient you can choose from one of three predefined gradient types: top-down, real-linear, real-circular.

Class nameclassName

Use the className prop to add your own custom defined class to the Flagpack component. This makes is easy to style by referencing it in your stylesheet.