react-flagpack

Install the package via npm. Note that react-flagpack requires files to be injected into your project's static/public folder. The package includes a CLI to automate this, but you must configure your package.json to execute it.

To ensure the assets are correctly placed, add a postinstall script to your package.json. If your package manager does not run postinstall automatically, you may need to run the command manually.

For Gatsby projects, you must pass the --framework gatsby flag to the CLI. For other frameworks like NextJS, create-react-app, or Remix, the default configuration is sufficient.

$ npm install react-flagpack --save

{
  "scripts": {
    "postinstall": "react-flagpack"
  },
  "dependencies": {
    "react-flagpack": "^2.0.5"
  }
}

To start a new Gatsby project using the minimal TypeScript starter, use the Gatsby CLI via npm init gatsby with the -ts flag.

# create a new Gatsby site using the minimal TypeScript starter
npm init gatsby -- -ts

To prepare the Remix application for production, first build the application, then start the production server.

1. Build the app:

npm run build

2. Start the app:

npm start

The built-in Remix app server is production-ready for Node.js environments. When deploying manually, ensure you include the output generated by npm run build:

• build/server
• build/client

To start the development server for the Remix application using Vite, run the following command in your terminal.

npm run dev

The create-react-app test application in this repository provides several standard npm scripts for development, testing, building, and configuration management.

• Development: Use npm start to run the app in development mode. The app will be available at http://localhost:3000 and will automatically reload on changes.
• Testing: Use npm test to launch the test runner in interactive watch mode.
• Production Build: Use npm run build to create a minified, optimized production build in the build folder. This version is ready for deployment.
• Configuration Customization: Use npm run eject if you need full control over the underlying build tools (webpack, Babel, ESLint, etc.).

Warning: npm run eject is a one-way operation. Once executed, you cannot revert to the managed configuration.

To start the development server for this Next.js project, use your preferred package manager to run the dev script. Once running, you can view the application at http://localhost:3000.

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

After creating your site, navigate into the project directory and run the development script to start the local server.

cd my-gatsby-site/
npm run develop

When upgrading to version 2.0.0 or higher, follow these steps:

1. Add post-install hook: Add "postinstall": "react-flagpack" to your package.json scripts.
2. Install: Run your install command (e.g., yarn install) ensuring you are on at least react-flagpack@2.0.2.
3. Verify Assets: After installation, a flags folder should appear in your project's public or static folder.
4. Import Styles: Styles are no longer injected automatically. You must manually import the CSS to enable styling props and server-side support. You can do this in a component:

   import 'react-flagpack/dist/style.css'

   Or in a global CSS file:

   @import 'react-flagpack/dist/style.css';

When using the generateFlags.ts utility, flag files are renamed from their base filename to one of the following country identifiers. This enables flexible asset selection based on the identifier type you prefer to use in your code.

Available Identifiers:

• alpha2: The two-letter country code.
• alpha3: The three-letter country code.
• numeric: The numeric country code.

Example Mapping: If a source file is us.svg, the script will generate files like us.svg (alpha2), usa.svg (alpha3), and potentially a numeric version if available in the countryCodeList.json mapping.

To use flags in your React application, import the Flag component and its required CSS file.

Note: Importing the CSS is mandatory if you want to use props other than code and size (such as gradient, hasDropShadow, etc.). You can import the CSS directly in a component or via an @import in a global CSS file.

import Flag from 'react-flagpack'
import 'react-flagpack/dist/style.css'

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