React-flags NPM

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