Package Exports

react-intl-universal-defaults
react-intl-universal-defaults/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-intl-universal-defaults) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-intl-universal-defaults

This is a tool for react-intl-universal that allows using default locale when selecting translation.

References

Installation

npm install react-intl-universal-defaults

yarn add react-intl-universal-defaults

Peer dependencies

intl-messageformat
react
react-intl-universal

See package.json for more details.

Example

Prerequisites:

Current languaguage: uk (Ukrainian)
Fallback language: en (English)

This means that you should always keep fallback locale up to date.

Step 1. Create locale files

EN locale:

{
  "key": "value",
  "keyHtml": "<span>value</span>",
  "greeting": "I am {name}",
  "greetingHtml": "<span>I am {name}</span>",
  "uniqueEnKey": "unique key"
}

UK locale:

{
  "key": "значення",
  "keyHtml": "<span>значення</span>",
  "greeting": "Я {name}",
  "greetingHtml": "<span>Я {name}</span>"
}

Step 2. Initialize react-intl-universal-defaults

import * as intlDefaults from 'react-intl-universal-defaults';

import enLocale from './locales/en.json';

intlDefaults.initialize({
  defaultLanguageTag: 'en',
  defaultLocale: enLocale,
});

Step 3. Initialize react-intl-universal

import * as intl from 'react-intl-universal';

import enLocale from './locales/en.json';
import ukLocale from './locales/uk.json';

intl.init({
  warningHandler: (message) => { console.warn(message); },
  currentLocale: 'uk',
  fallbackLocale: 'en',
  locales: {
    en: enLocale,
    uk: ukLocale,
  },
});

Step 4. Create translations file

import { t } from 'react-intl-universal-defaults';

const translations = {
  get uniqueEnKey() { return t('uniqueEnKey'); },
  greeting: (options) => t('greeting', options),
};

export default translations;

Step 5. Use translations in React component

import translations from './translations';

const SomeComponent = () => (
  <>
    <span>{translations.greeting({ name: 'Intl' })}</span>
    <span>{translations.uniqueEnKey}</span>
  </>
);

The render result will be as follows:

<span>I am Intl</span>
<span>unique key</span>