react-all-countries

Country metadata for React (and Node): name, ISO code, calling code, phone regex, timezone, and local SVG flags — no CDN dependency.

254 countries / territories · TypeScript types included · CommonJS

Install

npm install react-all-countries

Quick start

import {
  countries,
  getCountryByCode,
  getCountryByName,
  getCountriesByCallingCode,
  searchCountries,
  getFlagPath,
} from "react-all-countries";

console.log(countries.length); // 254

const bd = getCountryByCode("BD");
/*
{
  name: 'Bangladesh',
  shortName: 'BD',
  phonePrefix: '+880',
  phoneRegex: '^(\\+880|0)1[3-9][0-9]{8}$',
  timezones: 'UTC+06:00',
  iana: 'Asia/Dhaka',
  flag: 'data:image/svg+xml,...'  // ready for <img src={country.flag} />
}
*/

getCountryByName("Bangladesh");
getCountriesByCallingCode(880); // or '+880'
searchCountries("bang");        // partial name match
getFlagPath("BD");              // absolute path to SVG (Node / SSR)

Also works with require:

const { countries, getCountryByCode } = require("react-all-countries");

Raw JSON (paths only — use main import for ready-to-use flag URLs):

require("react-all-countries/data/countries.json");

Flags

Every country includes a flag field as a ready-to-use image URL (SVG data URL). No extra helper or import is required:

import { countries, getCountryByCode } from "react-all-countries";

function CountryRow({ code }) {
  const country = getCountryByCode(code);
  if (!country) return null;

  return (
    <div>
      <img src={country.flag} alt={country.name} width={24} height={16} />
      <span>{country.name}</span>
    </div>
  );
}

// Or map all countries
countries.map((c) => (
  <img key={c.shortName || c.name} src={c.flag} alt={c.name} width={24} />
));

Original SVG files are also shipped under data/flags/ if you prefer to import a single flag file:

import bdFlag from "react-all-countries/data/flags/bd.svg";

<img src={bdFlag} alt="Bangladesh" width={24} />

Node

const fs = require("fs");
const { getFlagPath } = require("react-all-countries");

const svg = fs.readFileSync(getFlagPath("BD"), "utf8");

Phone validation

Each entry includes a phoneRegex string. Create a RegExp before testing:

import { getCountryByCode } from "react-all-countries";

const bd = getCountryByCode("BD");
const re = new RegExp(bd.phoneRegex);

re.test("+8801712345678"); // true
re.test("01712345678");    // true
re.test("12345");          // false

Patterns are mobile-oriented and often strict (carrier / number-range aware). Prefer numbers in international (+…) or local national format.

Country select example

import { countries } from "react-all-countries";

function CountrySelect({ value, onChange }) {
  return (
    <select value={value} onChange={(e) => onChange(e.target.value)}>
      {countries.map((c) => (
        <option key={c.shortName || c.name} value={c.shortName}>
          {c.name} ({c.phonePrefix})
        </option>
      ))}
    </select>
  );
}

Data shape

interface Country {
  name: string;        // common name
  shortName: string;   // ISO 3166-1 alpha-2 (empty for a few disputed regions)
  phonePrefix: string; // e.g. '+880'
  phoneRegex: string;  // phone validation pattern
  timezones: string;   // UTC offset label, e.g. 'UTC+06:00'
  iana: string;        // IANA timezone, e.g. 'Asia/Dhaka'
  flag: string;        // SVG data URL — use directly as <img src={country.flag} />
}

API

| Export | Description | |--------|-------------| | countries | Full array of all countries | | getCountries() | Same as countries | | getCountryByCode(code) | Lookup by shortName (case-insensitive) | | getCountryByName(name) | Exact name match (case-insensitive) | | getCountriesByCallingCode(code) | Filter by calling code (880 or +880) | | searchCountries(query) | Partial name search | | getFlagPath(codeOrCountry) | Absolute filesystem path to the SVG |

Default export is the same as countries.

Package exports

| Path | Contents | |------|----------| | react-all-countries | Main API | | react-all-countries/data/countries.json | Raw JSON data | | react-all-countries/data/flags/*.svg | Local flag SVGs |

License

ISC