react-flag-icon-css

A simple React SVG country flags component: it works with React Css Modules (default) or standard Css.

Installation

React Flag Icon Css is distributed as an npm package.

We recommend installing and managing npm packages with yarn:

$ yarn add react-flag-icon-css

otherwise with npm:

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

Prerequisites

We recommend using the Webpack 2 module bundler and ecosystem to assemble your app.

You will need to install and configure a few commonly used packages for Webpack (see the Webpack 2 example project):

$ yarn add -D babel-loader css-loader file-loader style-loader extract-text-webpack-plugin

otherwise with npm:

$ 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)

A Webpack 2 example project is available.

:flags: 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.

: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'), when using unsupported props or prop values, you are warned at runtime by Failed prop type errors in the browser console. Feature powered by prop-types.

Static type checking: if you use Facebook's flow in your app (otherwise you can skip this section, unless you want to submit a PR), it should automatically pick up this package's definitions from the .js.flow files that are distributed with it, checking your code accordingly when you run yarn flow. Using the latest Flow version or the version in ./package.json is recommended. We also recommend using a Flow-aware editor such as Nuclide for Atom.

Contributing

Contributions are welcome:

• :pencil2: Write code: use a topic branch, follow the AngularJS commit style guidelines and check that yarn prepublish (build, test, type checking, linting ...) returns zero errors before opening a PR. If you want to make major modifications to the code, please open an issue to discuss them first.

• :bug: Report a bug: first, search all issues. If nothing turns up, open a new issue and be as specific as possible, so that we can reproduce your setup and find out if it is a bug or a configuration issue.

• :triangular_ruler: Propose a feature: first, search all issues. If nothing turns up, open a new issue and describe what the proposed feature should do, why you think it is important and an example use case.

Thanks! :blue_heart:

Find this module useful?

:star: Starring it lets you keep track of this project and helps more people discover it.

Source of the flags

This project uses the great SVG country flags from flag-icon-css.

License

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

Changelog

1.0.13 (2017-04-26)

• test: add tests for types/propTypes (b0f07a7)
• refactor: migrate from tcomb & tcomb-react to prop-types (f8b6758)
• chore(package): bump enzyme, flow-bin, tcomb (3459e45)
• chore(package): remove tape (unused) (450855e)
• chore(package): update eslint-plugin-flowtype to 2.32.1 (bb32323)
• fix(flow): make FlagIconOptionsType exact (7e30bb1)

<a name="1.0.12"></a>