use-flags

Country flags from Flagpedia to use in your React project

Install

npm install --save use-flags

Flag Types

Flagpedia has 2 different flag types:

• Wavey

  

• Flat

  

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