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.

View documentation on flagpack.xyz

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

$: npm install react-flagpack --save

This package depends on the files being injected into the static folder of the project. React flagpack comes bundled with a CLI that will do this automatically for you, but you have to tell node to execute it.

Add the following to the scripts in package.json Note that postinstall sometimes doesn't run with certain package managers, so you may need to run it manually

{
  "scripts": {
    // ...rest of your scripts
    "postinstall": "react-flagpack"
  },
  "dependencies": {
    "react-flagpack": "^2.0.5"
  }
}

This tool accepts the parameter "--framework" which can be used to pass the correct framework to it. The default selected framework supports NextJS, create-react-app, Remix.

For Gastby support please provide the --framework gatsby option

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

import Flag from 'react-flagpack'
// # Optional but required for props other than code & size to work.
// Can also be imported in a css file using @import 'react-flagpack/dist/style.css';
import 'react-flagpack/dist/style.css'

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

To migrate to react-flagpack 2.0.0 you will need to make some minor changes to your code base. First you will need to add react-flagpack to your post-install hook see installation, then run yarn install (ensuring you are on at minimal react-flagpack 2.0.2).

After install you should see a flags folder in the public (or static) folder of your project.

Since react-flagpack styles are no longer injected in the Flag by default. This change was made for two reasons:

• Server side support (the injecting relied on document)
• Not all users require the default styling so this caused unnecessary addition to bundle size

The new way of loading the CSS is by importing the default styles. You can do this in one of two ways.

// Component.tsx - In a component where flagpack is used
import 'react-flagpack/dist/style.css'

Or

/* Global.css - Importing it in the global css file */
@import 'react-flagpack/dist/style.css';

Frequently Asked Questions

Documentation

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

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

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