React
Flagpack for React is created using React v16.8. The Flagpack component has not been tested for compatibility with older version of React.
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.