docs / templates / countries

Countries

The countries.ts file exports an array of objects, where each object represents a country and contains useful information for interface components, such as country selectors in phone number forms.

This standardized list makes it easier to implement features that require country data, such as dialing codes, flags, and phone formatting masks.

Object Structure

Each object in the countries array follows the following structure:

typescript

interface Country {
    name: string;
    code: string;
    iso: string;
    flag: string;
    mask: string | string[];
}

name: The official name of the country (e.g., "Brazil").
code: The international dialing code (e.g., +55).
iso: The ISO 3166-1 alpha-2 country code (e.g., BR).
flag: The URL to the SVG image of the country's flag.
mask: A formatting mask for phone numbers, where _ represents a digit to be inserted (e.g., "(__) _____-____"). Some countries provide more than one valid format, in which case mask is an array of strings instead of a single string.

Usage Example

To use the list of countries in your component, simply import the array from the file:

typescript

import { countries } from "./countries";

function CountrySelector() {
    return (
        <select>
            {countries.map((country) => (
                <option key={country.iso} value={country.code}>
                    <img src={country.flag} alt={country.name} />
                    {country.name} ({country.code})
                </option>
            ))}
        </select>
    );
}

Learn how subpath and root imports differ in How do I use imports.

Object Example (Brazil)

json

{
    "name": "Brasil",
    "code": "+55",
    "iso": "BR",
    "flag": "https://cdn.kcak11.com/CountryFlags/countries/br.svg",
    "mask": ["(__) _____-____", "(__) ____-____"]
}

On this page