country-info-flags

A lightweight, versatile library for displaying country flags and accessing country information in React and React Native applications.

Features

• 🚩 SVG country flags for all countries
• 📱 Compatible with both React and React Native
• 📞 Country phone codes
• 💰 Currency information
• 🔄 TypeScript support
• 🔍 Country code lookup

Installation

# npm
npm install country-info-flags

# yarn
yarn add country-info-flags

# pnpm
pnpm add country-info-flags

For React Native, you'll need additional dependencies:

npm install react-native-svg

Usage

Country Flags Component Basic usage - default size is 300x300

import { CountryFlag } from 'country-info-flags';

// Basic usage - default size is 300x300
<CountryFlag countryCode="US" />

Custom size

<CountryFlag countryCode="FR" width={40} height={30} />

Responsive design

<CountryFlag countryCode="JP" width="100%" height={50} />

Country Information Functions

Get Phone Number Code

import { getPhoneNumberCode } from 'country-info-flags';

// Get phone code for a country
const usInfo = getPhoneNumberCode('US');
console.log(usInfo);
// Output: { code: 'US', name: 'United States of America', phoneCode: '+1' }

// With error handling
const unknownCountry = getPhoneNumberCode('ZZZ');
if (unknownCountry.notFound) {
  console.log(unknownCountry.message); // Country with code 'ZZZ' not found
}

// Custom error message
const custom = getPhoneNumberCode('ZZZ', 'Invalid country code provided');
if (custom.notFound) {
  console.log(custom.message); // Invalid country code provided
}

Get Country Currency Code

import { getCountryCurrencyCode } from 'country-info-flags';

// Get currency for a country
const euroCurrency = getCountryCurrencyCode('DE');
console.log(euroCurrency);
// Output: { code: 'DE', name: 'Germany', currency: 'EUR' }

Get All Country Currencies

import { getAllCountryCurrencies } from 'country-info-flags';

// Get all countries with their currencies
const allCurrencies = getAllCountryCurrencies();
console.log(allCurrencies[0]);
// Output: { code: 'AF', name: 'Afghanistan', currency: 'AFN' }

Get All Phone Codes

import { getAllPhoneCurrencies } from 'country-info-flags';

// Get all countries with their phone codes
const allPhoneCodes = getAllPhoneCurrencies();
console.log(allPhoneCodes[0]);
// Output: { code: 'AF', name: 'Afghanistan', phoneCode: '+93' }

Country Flag Example Here's what the flag components look like:

<div style={{ display: 'flex', gap: 10 }}>
  <CountryFlag countryCode="US" height={30} />
  <CountryFlag countryCode="CA" height={30} />
  <CountryFlag countryCode="GB" height={30} />
  <CountryFlag countryCode="JP" height={30} />
  <CountryFlag countryCode="IN" height={30} />
</div>

API Reference

UI Components _CountryFlag _

| Prop | Type | Default | Description | |-------------|--------|---------|---------------------------------------| | countryCode | string | | ISO 3166-1 alpha-2 country code | | height | number | 20 | Height of the flag (pixels) | | width | number | 20 | Width of the flag (pixels) |

Data Functions

getPhoneNumberCode(countryCode, errorMessage?) Returns phone code information for a country.

getCountryCurrencyCode(countryCode, errorMessage?) Returns currency information for a country.

getAllCountryCurrencies() Returns a list of all countries with their currencies.

Country Flag Example Returns a list of all countries with their phone codes.

License

MIT