Skip to main content

Intl.PluralRules

A spec-compliant polyfill for Intl.PluralRules fully tested by the official ECMAScript Conformance test suite

npm Version size

Installation​

npm i @formatjs/intl-pluralrules

Requirements​

Usage​

Via polyfill-fastly.io​

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

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

Simple​

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

React Native​

The polyfill conditional detection code runs very slowly on Android and can slow down your app's startup time by seconds. Since React Native uses Hermes which does not support Intl.PluralRules, import /polyfill-force instead for much better performance:

import '@formatjs/intl-pluralrules/polyfill-force' // instead of /polyfill
import '@formatjs/intl-pluralrules/locale-data/en'

Dynamic import + capability detection​

import {shouldPolyfill} from '@formatjs/intl-pluralrules/should-polyfill'
async function polyfill(locale: string) {
  const unsupportedLocale = shouldPolyfill(locale)
  // This locale is supported
  if (!unsupportedLocale) {
    return
  }
  // Load the polyfill 1st BEFORE loading data
  await import('@formatjs/intl-pluralrules/polyfill-force')
  await import(`@formatjs/intl-pluralrules/locale-data/${unsupportedLocale}`)
}