react-flag-icon-css

A simple React SVG country flags component that works with React Css Modules (default) or global Css.

Installation

React Flag Icon Css is distributed as an npm package:

$ yarn add react-flag-icon-css

or

$ npm install --save react-flag-icon-css

Prerequisites

The webpack module bundler and ecosystem are recommended. You will need to install a few packages, including:

$ yarn add -D babel-loader css-loader file-loader style-loader extract-text-webpack-plugin classnames tcomb tcomb-react react-css-modules

or

$ npm install --save-dev ...

Basic usage

Import the factory from 'react-flag-icon-css', it accepts the React module as the first argument and creates the FlagIcon component. This approach ensures that FlagIcon uses your app's React instance, avoiding issues such as two versions of React being loaded at the same time.

import React from 'react'
import ReactDOM from 'react-dom'
import FlagIconFactory from 'react-flag-icon-css'

const FlagIcon = FlagIconFactory(React)
// If you are not using css modules, write the following:
// const FlagIcon = FlagIconFactory(React, { useCssModules: false })

const App = (props = {}) =>
  <div>
    <FlagIcon code={props.code} size={props.size} />
  </div>

const rootEL = document.body.querySelector('#app')

const appProps = { code: 'it', size: '3x' }
ReactDOM.render(<App {...appProps} />, rootEL)

An example project is available.

FlagIcon props

Prop	Type	Flow Type	Default	Description	Supported values
code *	String	FlagIconCodeType		ISO 3166-1-alpha-2 code	The list is here
size	String	FlagIconSizeType			lg, 2x, 3x, 4x, 5x
flip	String	FlagIconFlipType			horizontal, vertical
rotate	Number	FlagIconRotateType			30, 60, 90, 180, 270
squared	Boolean		false
Component	String		span		e.g span, div
Children	String	React$Element<*>		React element	e.g <Something />

Remember to always build FlagIcon with its factory.

FlagIconFactory

Argument	Type	Flow Type	Description	Supported values
React *	Module	ReactModule	Your app's React instance	Versions in peerDependencies
options	Object	FlagIconOptionsType

Development

Runtime type checking: in development mode (process.env.NODE_ENV !== 'production'), if you attempt to use an unsupported prop or prop value, you will see "Failed prop type" errors in the browser console (tcomb package).

Static type checking: if you use Flow, it should automatically pick up this package's definitions from the .js.flow files and check your code accordingly when you run yarn run flow. The latest Flow version or the version in package.json is recommended.

Contributing

Contributions are welcome. Please use a topic branch, follow the AngularJS commit style guidelines and check that yarn run prepublish (recommended) or yarn run prepublish (build, test, type checking, lint ...) returns zero errors before opening a PR. Thanks!

Source of the flags

This project uses flag-icon-css SVG and Css.

License

This project is licensed under the terms of the MIT license.