country-info-flags
Version:
A lightweight library for country flags, phone codes, and currency information for React and React Native
169 lines (113 loc) • 4 kB
Markdown
# country-info-flags
A lightweight, versatile library for displaying country flags and accessing country information in React and React Native applications.
[](https://www.npmjs.com/package/country-info-flags)
[](https://github.com/yourusername/country-info-flags/blob/main/LICENSE)
## 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
```bash
# 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:
```bash
npm install react-native-svg
```
Usage
**Country Flags Component**
Basic usage - default size is 300x300
```bash
import { CountryFlag } from 'country-info-flags';
// Basic usage - default size is 300x300
<CountryFlag countryCode="US" />
```
**Custom size**
```bash
<CountryFlag countryCode="FR" width={40} height={30} />
```
**Responsive design**
```bash
<CountryFlag countryCode="JP" width="100%" height={50} />
```
### Country Information Functions
**Get Phone Number Code**
```bash
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
```bash
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**
```bash
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**
```bash
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:
```bash
<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