react-flags

Flags of the world react component

Options

country: PropTypes.string (default: _unknown)

The ISO 3166-1 alpha-2 or alpha-3 of the country's flag or one of the following:

• _abkhazia
• _basque-country
• _british-antarctic-territory
• _commonwealth
• _england
• _kosovo
• _mars
• _nagorno-karabakh
• _nato
• _northern-cyprus
• _olympics
• _red-cross
• _scotland
• _somaliland
• _south-ossetia
• _united-nations
• _unknown
• _wales

format: PropTypes.string (default: 32)

• png: square png file.
• icns: square icns file.
• ico: square ico file.
• svg: normal sized flag SVG file.

pngSize: PropTypes.number (default: 32)

Size of the flag if we are using the PNG format.

Possible values are:

• 16: 16 pixels
• 24: 24 pixels
• 32: 32 pixels
• 48: 48 pixels
• 64: 64 pixels

shiny: PropTypes.bool (default: false)

Display a shiny of flat flag. Default is a flat flag.

width: PropTypes.number (default: null)

Width of the flag HTML tag.

height: PropTypes.number (default: null)

Height of the flag HTML tag.

alt: PropTypes.string (default: this.props.name)

Alternative text of the flag HTML tag.

basePath: PropTypes.string (default: /img/flags)

The base path of where the flags files from the vendor folder are in your project.

Installation

npm install --save react-flags

You need to copy the content of the vendor folder to your local project. The default base path is /img/flags

Usage

import React from "react";
import Flag from "react-flags";

const App = React.createClass({
  render() {
    return (
      <div>
        <Flag
          name="CAN"
          format="png"
          pngSize={64}
          shiny={true}
          alt="Canada Flag"
        />
      </div>
    );
  }
});

React.render(<App />, document.body);

Development and testing

npm install
npm start

Then work on the Flag.jsx component in src.

Change log

See the change log.

Sources

• GoSquared - 2600 Flag Icon Set
• flag-icon-css - SVG flags icons

Author

Maxime Poulin mpoulin@roux.ca

License

MIT (See LICENSE)

Versions

v0.1.18 - (2019/06/06)

• Added support for title attribute to img tag.

v0.1.17 - (2018/10/19)

• Changed _unknown.svg flag to fit proportions

v0.1.16 - (2018/10/04)

• Added webpack-dev-server as devDependency
• Added SVG for the unknown flag.

v0.1.15 - (2018/10/02)

• Updated lodash to v4.

v0.1.14 - (2018/10/01)

• Added SVG flags.

v0.1.13 - (2018/03/19)

• Now allowing React 16 as a peer dependency.

v0.1.12 - (2016/10/20)

• Added flag pointers to: AG, IC, LT, NF, SC and TV

v0.1.11 - (2016/07/13)

• Now allowing React 15.x as a peer dependency.

v0.1.10 - (2016/06/29)

• Fixed issue with last publish.

v0.1.9 - (2016/06/29)

• Now allowing React 15.1 as a peer dependency.

v0.1.8 - (2016/02/22)

• Fixed issue for when an incorrect CCA3 was provided.

v0.1.7 - (2015/11/03)

• Now allowing React 0.14 versions as peer dependencies.

v0.1.6 - (2015/07/06)

• Bug fix with country code type check when the old name prop was used instead of the country prop.

v0.1.5 - (2015/07/06)

• Support for ISO 3166-1 alpha-3.

v0.1.4 - (2015/06/19)

• Changed name prop for country.

v0.1.3 - (2015/06/17)

• Changed the build system from babel-cli to babel via webpack.

v0.1.2 - (2015/06/17)

• ESLint integration.
• Support both lower and uppercase ISO 3166-1 alpha-2.

v0.1.1 - (2015/06/17)

• Possiblity to set the HTML tag: width, height and alt text in the props.
• Changed props structure (file type vs size).

v0.1.0 - (2015/06/17)

• Initial version of the project.