use-react-countries

A tiny fully customizable react hook which gives you full list of countries with their flags, emojis, country calling codes, postal codes and many more...

Install

• npm

npm install --save use-react-countries

• yarn

yarn add use-react-countries

Examples

See this codesandbox playground or /example folder if you want to play with hook.

Usage

A simple example of a component which you can copy-paste and take info about all countries.

import { useCountries } from 'use-react-countries'

const Example = () => {
  const { countries } = useCountries()

  return (
    <div>
      {countries.map(
        ({
          name,
          postalCode,
          emoji,
          capital,
          area,
          population,
          countryCallingCode
        }) => (
          <section>
            <h2>
              {emoji} {name}
            </h2>
            <p>
              Post code: {postalCode?.format} <br /> Regex for post code:{' '}
              {postalCode?.regex}
            </p>
            <p>{capital}</p>
            <p>{area}</p>
            <p>{population}</p>
            <p>{countryCallingCode}</p>
          </section>
        )
      )}
    </div>
  )
}

API

• Country interface

type country = {
  name: string,
  capital: string,
  area: number,
  coordinates: number[],
  currencies: {
    name: string,
    symbol: string
  }[],
  languages: string[],
  maps: {
    googleMaps: string,
    openStreetMaps: string
  },
  postalCode: {
    format: string,
    regex: string
  },
  flags: {
    png: string,
    svg: string
  },
  population: number,
  emoji: string,
  countryCallingCode: string
}

Property	Type	Description
name	string
capital	string
area	number
emoji	string
flags	{ png: string, svg: string }
countryCallingCode	number
population	number
currencies	{ name: string, symbol: string }[]
languages	string[]
maps	{ googleMaps: string, openStreetMaps: string }
postalCode	{ format: string, regex: string }
coordinates	[number, number]

Authors

• Oganisyan Vrezh

License

MIT © vre2h

---

This hook is created using create-react-hook.