Package Exports

react-i18nify

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-i18nify) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-i18nify

Simple i18n translation and localization components and helpers for React applications.

A working example of this package can be found here at Tonic.

If you're using Redux or Fluxible, feel free to use react-redux-i18n or react-fluxible-i18n instead.

Preparation

First install the package:

npm i react-i18nify --save

Next, load the translations and locale to be used:

const I18n = require('react-i18nify').I18n;

I18n.setTranslations({
  en: {
    application: {
      title: 'Awesome app with i18n!',
      hello: 'Hello, %{name}!'
    },
    date: {
      long: 'MMMM Do, YYYY'
    },
    export: 'Export %{count} items',
    export_0: 'Nothing to export',
    export_1: 'Export %{count} item',
    two_lines: 'Line 1<br />Line 2'
  },
  nl: {
    application: {
      title: 'Toffe app met i18n!',
      hello: 'Hallo, %{name}!'
    },
    date: {
      long: 'D MMMM YYYY'
    },
    export: 'Exporteer %{count} dingen',
    export_0: 'Niks te exporteren',
    export_1: 'Exporteer %{count} ding',
    two_lines: 'Regel 1<br />Regel 2'
  }
});

I18n.setLocale('nl');

Alternatively, you can provide a callback to return the translations and locale to setTranslationsGetter and setLocaleGetter respectively.

const I18n = require('react-i18nify').I18n;

function translation() {
  return {
    en: { ... },
    nl: { ... }
  };
}

function locale() {
  return 'nl';
}

I18n.setTranslationsGetter(translation):
I18n.setLocaleGetter(locale);

Now you're all set up to start unleashing the power of react-i18nify!

Components

The easiest way to translate or localize in your React components is by using the Translate and Localize components:

const React = require('react');
const Translate = require('react-i18nify').Translate;
const Localize = require('react-i18nify').Localize;

const AwesomeComponent = React.createClass({
  render: function() {
    return (
      <div>
        <Translate value="application.title"/>
          // => returns '<span>Toffe app met i18n!</span>' for locale 'nl'
        <Translate value="application.title" style={{ fontWeight: 'bold', fontSize: '14px' }} />
        // => returns '<span style="font-weight:bold;font-size:14px;">Toffe app met i18n!</span>' for locale 'nl'
        <Translate value="application.hello" name="Aad"/>
          // => returns '<span>Hallo, Aad!</span>' for locale 'nl'
        <Localize value="2015-09-03" dateFormat="date.long"/>
          // => returns '<span>3 september 2015</span> for locale 'nl'
        <Localize value={10/3} options={{style: 'currency', currency: 'EUR', minimumFractionDigits: 2, maximumFractionDigits: 2}}/>
          // => returns '<span>€ 3,33</span> for locale 'nl'
        <Translate value="export" count={1} />
          // => returns '<span>Exporteer 1 ding</span> for locale 'nl'
        <Translate value="export" count={2} />
          // => returns '<span>Exporteer 2 dingen</span> for locale 'nl'
        <Translate value="two_lines" dangerousHTML />
          // => returns '<span>Regel 1<br />Regel 2</span>'
      </div>
    );
  }
});

Keeping components updated

When the translation object or locale values are set, all instances of Translate and Localize will be re-rendered to reflect the latest state. If you choose to use I18n.l or I18n.t then it up to you to handle state change.

If you'd rather not to re-render components after setting locale or translations object, then pass false as a second argument to setLocale and/or setTranslations.

Helpers

If for some reason, you cannot use the components, you can use the I18n.t and I18n.l helpers instead:

const I18n = require('react-i18nify').I18n;

I18n.t('application.title'); // => returns 'Toffe app met i18n!' for locale 'nl'
I18n.t('application.hello', {name: 'Aad'}); // => returns 'Hallo, Aad!' for locale 'nl'
I18n.t('export', {count: 0}); // => returns 'Niks te exporteren' for locale 'nl'
I18n.t('application.unknown_translation'); // => returns 'Unknown Translation' as translation is missing
I18n.t('application', {name: 'Aad'}); // => returns {hello: "Hallo, Aad!", title: "Toffe app met i18n!"} for locale 'nl'

I18n.l(1385856000000, { dateFormat: 'date.long' }); // => returns '1 december 2013' for locale 'nl'
I18n.l(Math.PI, { maximumFractionDigits: 2 }); // => returns '3,14' for locale 'nl'

Supported localize options

The localize component and helper support all date formatting options as provided by the Javascript moment library. For the full list of options, see http://momentjs.com/docs/#/displaying/format/.

For number formatting, the localize component and helper support all options as provided by the Javascript built-in Intl.NumberFormat object. For the full list of options, see https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/NumberFormat.

Fallback on translation missing

By default, when a translation is missing, the translation key will be returned in a slightly formatted way, as can be seen in the I18n.t('application.unknown_translation'); example above. You can however overwrite this behavior by setting a function to handle missing translations.

const I18n = require('react-i18nify').I18n;

function myHandleMissingTranslation(key, replacements) {
  return `Missing translation: ${key}`;
}

I18n.setHandleMissingTranslation(myHandleMissingTranslation):

I18n.t('application.unknown_translation'); // => returns 'Missing translation: application.unknown_translation'

The library itself doesn't have this functionality so it's up to you to setup it. For example, you can use "parent tree lookup with common translations" strategy: