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

1# npm
2npm install country-info-flags
3
4# yarn
5yarn add country-info-flags
6
7# pnpm
8pnpm add country-info-flags
9
10

For React Native, you'll need additional dependencies:

1npm install react-native-svg
2

Usage

Country Flags Component Basic usage - default size is 300x300

1import { CountryFlag } from 'country-info-flags';
2
3// Basic usage - default size is 300x300
4<CountryFlag countryCode="US" />
5

Custom size

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

Responsive design

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

Country Information Functions

Get Phone Number Code

1import { getPhoneNumberCode } from 'country-info-flags';
2
3// Get phone code for a country
4const usInfo = getPhoneNumberCode('US');
5console.log(usInfo);
6// Output: { code: 'US', name: 'United States of America', phoneCode: '+1' }
7
8// With error handling
9const unknownCountry = getPhoneNumberCode('ZZZ');
10if (unknownCountry.notFound) {
11  console.log(unknownCountry.message); // Country with code 'ZZZ' not found
12}
13
14// Custom error message
15const custom = getPhoneNumberCode('ZZZ', 'Invalid country code provided');
16if (custom.notFound) {
17  console.log(custom.message); // Invalid country code provided
18}
19

Get Country Currency Code

1import { getCountryCurrencyCode } from 'country-info-flags';
2
3// Get currency for a country
4const euroCurrency = getCountryCurrencyCode('DE');
5console.log(euroCurrency);
6// Output: { code: 'DE', name: 'Germany', currency: 'EUR' }
7
8

Get All Country Currencies

1import { getAllCountryCurrencies } from 'country-info-flags';
2
3// Get all countries with their currencies
4const allCurrencies = getAllCountryCurrencies();
5console.log(allCurrencies[0]);
6// Output: { code: 'AF', name: 'Afghanistan', currency: 'AFN' }
7

Get All Phone Codes

1import { getAllPhoneCurrencies } from 'country-info-flags';
2
3// Get all countries with their phone codes
4const allPhoneCodes = getAllPhoneCurrencies();
5console.log(allPhoneCodes[0]);
6// Output: { code: 'AF', name: 'Afghanistan', phoneCode: '+93' }
7

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

1<div style={{ display: 'flex', gap: 10 }}>
2  <CountryFlag countryCode="US" height={30} />
3  <CountryFlag countryCode="CA" height={30} />
4  <CountryFlag countryCode="GB" height={30} />
5  <CountryFlag countryCode="JP" height={30} />
6  <CountryFlag countryCode="IN" height={30} />
7</div>
8
9

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