use-flags

Country flags from Flagpedia to use in your React project

NPM JavaScript Style Guide

Install

npm install --save use-flags

Flag Types

Flagpedia has 2 different flag types:

  • Wavey

    Wavey

  • Flat

    Fixed Height

But for the Flat type, there are also two different subtypes:

  • Fixed Height
  • Fixed Width

Usage

Usage of Wavey Flags

WaveyFlag requires 3 attributes:

  • country (ISO 3166)
  • fileType (webp or png)
  • ratio

import React from 'react'
import { WaveyFlag } from 'use-flags'

const App = () => {
  return <WaveyFlag country='tr' fileType='webp' ratio='256x192' />
}

Usage of Flat Flags

Flat Flags have two subtypes: Fixed Height and Fixed Width.
Both require 3 attributes:

  • country (ISO 3166)
  • fileType (webp, png, jpeg)
  • flagHeight or flagWidth

import React from 'react'
import { FixedHeightFlag, FixedWidthFlag } from 'use-flags'

const App = () => {
  return (
    <div>
      <FixedHeightFlag country='tr' fileType='webp' flagHeight='h240' />
      <FixedWidthFlag country='tr' fileType='webp' flagWidth='w2560' />
    </div>
  )
}

SVG Flags

SVG Flags require 2 attributes:

  • country (ISO 3166)
  • width

import React from 'react'
import { SVGFlag } from 'use-flags'

const App = () => {
  return <SVGFlag country='tr' flagWidth='2560' />
}

License

MIT © CanCodes

GitHub

View Github