/react-flags

Flags of the world react component

Primary LanguageJavaScriptMIT LicenseMIT

react-flags

Flags of the world react component

Dependency Status devDependency Status peerDependency Status

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.

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 "./Flag.js";

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

Author

Maxime Poulin mpoulin@roux.ca

License

MIT (See LICENSE)