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)