Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

react-flag-icon-css

Package Overview
Dependencies
Maintainers
1
Versions
23
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-flag-icon-css

React SVG country flags component

  • 1.0.5
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
6.9K
decreased by-12.99%
Maintainers
1
Weekly downloads
 
Created
Source

A simple React SVG country flags component that works with React Css Modules (default) or global Css.

Installation

React Flag Icon Css is distributed as an npm package:

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

Prerequisites

The webpack module bundler and ecosystem are recommended. You will need to install a few packages, including:

$ npm install --save-dev babel-loader css-loader file-loader sass-loader node-sass style-loader extract-text-webpack-plugin classnames tcomb tcomb-react react-css-modules

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)

An example project is available.

FlagIcon props

PropTypeFlow TypeDefaultDescriptionSupported values
code *StringFlagIconCodeTypeISO 3166-1-alpha-2 codeThe list is [here](relative link/static/countries.json)
sizeStringFlagIconSizeTypelg, 2x, 3x, 4x, 5x
flipStringFlagIconFlipTypehorizontal, vertical
rotateNumberFlagIconRotateType30, 60, 90, 180, 270
squaredBooleanfalse
ComponentStringspane.g span, div
ChildrenStringReact$Element<*>React elemente.g <Something />

Remember to always build FlagIcon with its factory.

FlagIconFactory

ArgumentTypeFlow TypeDescriptionSupported values
React *ModuleReactModuleYour app's React instanceVersions in peerDependencies
optionsObjectFlagIconOptionsType

Development

Runtime type checking: in development mode (process.env.NODE_ENV !== 'production'), if you attempt to use an unsupported prop or prop value, you will see "Failed prop type" errors in the browser console (tcomb package).

Static type checking: if you use Flow, it should automatically pick up this package's definitions from the .js.flow files and check your code accordingly when you run npm run flow. The latest Flow version or the version in package.json is recommended.

Contributing

Contributions are welcome. Please use a topic branch, follow the AngularJS commit style guidelines and check that npm run prepublish (build, test, type checking, lint ...) returns zero errors before opening a PR. Thanks!

Source of the flags

This project uses flag-icon-css SVG and Css.

License

This project is licensed under the terms of the [MIT license](relative link/LICENSE).

Keywords

FAQs

Package last updated on 06 Oct 2016

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc