intl-tel-input icon indicating copy to clipboard operation
intl-tel-input copied to clipboard

Migrate to DisplayNames for country name translations

Open jackocnr opened this issue 3 months ago • 0 comments

Since you mentioned translations,

How about migrating to DisplayNames for region display names?

// Get display names of region in English
let regionNames = new Intl.DisplayNames(["en"], { type: "region" });
regionNames.of("419"); // "Latin America"
regionNames.of("BZ"); // "Belize"
regionNames.of("US"); // "United States"
regionNames.of("BA"); // "Bosnia & Herzegovina"
regionNames.of("MM"); // "Myanmar (Burma)"

// Get display names of region in Traditional Chinese
regionNames = new Intl.DisplayNames(["zh-Hant"], { type: "region" });
regionNames.of("419"); // "拉丁美洲"
regionNames.of("BZ"); // "貝里斯"
regionNames.of("US"); // "美國"
regionNames.of("BA"); // "波士尼亞與赫塞哥維納"
regionNames.of("MM"); // "緬甸"

Originally posted by @hasan-ozbey in #2072

My response in that threat:

@hasan-ozbey that's a great idea! I would welcome a pull request that moved us from the current system (importing country names from country-list project) to using DisplayNames instead.

Additionally, I think we will need an extra initialisation option for this, to pass in the locale string to use to setup DisplayNames. Perhaps we should call it countryNamesLocale?

This will also be a breaking change since we will be getting rid of the existing country name translations, which people might be using directly.

jackocnr avatar Sep 24 '25 08:09 jackocnr