Intl.DisplayNames

A polyfill for Intl.DisplayNames.

size

Installation#

npm
yarn

npm i @formatjs/intl-displaynames

Requirements#

Intl.getCanonicalLocales or polyfill
Intl.Locale or polyfill.

Features#

Everything in https://github.com/tc39/proposal-intl-displaynames.

Usage#

Via polyfill.io#

You can use polyfill.io URL Builder to create a polyfill script tag for Intl.DisplayNames. By default the created URL does not come with any locale data. In order to add locale data, append Intl.DisplayNames.~locale.<locale> to your list of features. For example:

<!-- Polyfill Intl.DisplayNames, its dependencies & `en` locale data -->
<script src="https://polyfill.io/v3/polyfill.min.js?features=Intl.DisplayNames,Intl.DisplayNames.~locale.en"></script>

Simple#

import '@formatjs/intl-displaynames/polyfill'
import '@formatjs/intl-displaynames/locale-data/en' // locale-data for en

Dynamic import + capability detection#

import {shouldPolyfill} from '@formatjs/intl-displaynames/should-polyfill'
async function polyfill(locale: string) {
  if (shouldPolyfill()) {
    // Load the polyfill 1st BEFORE loading data
    await import('@formatjs/intl-displaynames/polyfill')
  }

  if (Intl.DisplayNames.polyfilled) {
    switch (locale) {
      default:
        await import('@formatjs/intl-displaynames/locale-data/en')
        break
      case 'fr':
        await import('@formatjs/intl-displaynames/locale-data/fr')
        break
    }
  }
}