Generic i18n-related utilities

Usage no npm install needed!

<script type="module">
  import shopifyI18n from 'https://cdn.skypack.dev/@shopify/i18n';



Build Status Build Status License: MIT npm version npm bundle size (minified + gzip)

Generic i18n-related utilities.


$ yarn add @shopify/i18n



Takes a string and returns a version of it that appears as if it were translated (learn more about pseudotranslation).

This function accepts a number of arguments to customize the translation:

  • toLocale: a locale to simulate translation for. This is used primarily to adjust the change in size relative to the original string. When not provided, or when a locale is provided for which no custom size ratio exists, this function slightly increases the string size.
  • delimiter, startDelimiter, endDelimiter: strings used to mark parts of the source string that should not be translated. This can be used, for example, to prevent translation of replacements within a string.
  • prepend and append: strings to put at the start and end of the resulting string, respectively. This can be used to provide a common set of text around pseudotranslated code that can identify translated strings that are incorrectly joined together.
import {pseudotranslate} from '@shopify/react-i18n';

const pseudoOne = pseudoTranslate('cat'); // something like 'ͼααṭ'
const pseudoTwo = pseudoTranslate('cats: {names}', {
  toLocale: 'de',
  startDelimiter: '{',
  endDelimiter: '}',
  prepend: '[[!',
  append: '!]]',
}); // something like '[[!ͼααṭṡṡ: {names}]]!'


Accepts a locale and extracts the country code as defined in BCP 47, if it exists. The country code will be normalized to fully uppercase when present.

import {regionFromLocale} from '@shopify/i18n';

const regionEn = regionFromLocale('en'); // undefined
const regionEnCa = regionFromLocale('en-ca'); // 'CA'


Accepts a locale and extracts the language subtag as defined in BCP 47.

import {languageFromLocale} from '@shopify/i18n';

const languageFrCa = languageFromLocale('fr-CA'); // 'fr'