react-i18nify

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

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

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

Table of contents

• Installation
• Getting started
• Components
• Helpers
• API reference

Installation

Install by using npm:

$ npm i --save react-i18nify

Getting started

Start by loading setting 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');

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 = () => (
  <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>
);

Helpers

If for some reason, you cannot use the components, you can use the I18n.t and I18n.l helpers instead. These helpers however will not be re-rendered automatically in any way, so if you use those, it's up to handle state change.

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'

API Reference

I18n

Main module for handling all configurations and translations, with the following functions:

setLocale(locale, rerenderComponents = true)

The used locale can be set with this function. By default, changing the locale will re-render all components. This behavior can be prevented by providing false as a second argument.

setTranslations(translations, rerenderComponents = true)

The used translations can be set with this function. By default, changing the translations will re-render all components. This behavior can be prevented by providing false as a second argument.

setLocaleGetter(fn)

Alternatively to using setLocale, you can provide a callback to return the locale with setLocaleGetter:

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

const locale = () => 'nl';

I18n.setLocaleGetter(locale);

setTranslationsGetter(fn)

Alternatively to using setTranslations, you can provide a callback to return the translations with setTranslationsGetter:

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

const translation = () => ({
  en: { ... },
  nl: { ... }
});

I18n.setTranslationsGetter(translation);

setHandleMissingTranslation(fn)

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;

const myHandleMissingTranslation = (key, replacements) => `Missing translation: ${key}`;

I18n.setHandleMissingTranslation(myHandleMissingTranslation);

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

t(key, replacements = {})

Helper function to translate a key, given an optional set of replacements. See the above Helpers section for examples.

l(value, options)

Helper function to localize a value, given a set of options. See the above Helpers section for examples.

For localizing dates, the moment library is used. A dateFormat option can be used for providing a translation key with the format string. For the full list of formatting tokens which can be used in the format string, see http://momentjs.com/docs/#/displaying/format/. Moreover, a strictParse option can be provided. When set to true, moment's strict parsing will be used.

For number formatting, the localize helper supports 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.

forceComponentsUpdate()

This function can be called to force a re-render of all I18n components.

<Translate>

React translate component, with the following props:

value (string)

The translation key to translate.

dangerousHTML (bool)

If true, HTML is allowed in the translation.

className (string)

Optional CSS classname.

style (object)

Optional inline styling

Other props

All other provided props will be used as replacements for the translation.

<Localize>

React localize component, with the following props:

value (number/string/object)

The number or date to localize.

dateFormat (string)

The translation key for providing the format string. Only needed for localizing dates. For the full list of formatting tokens which can be used in the format string, see http://momentjs.com/docs/#/displaying/format/.

options (object)

When localizing dates, a strictParse option can be provided. When set to true, moment's strict parsing will be used.

When localizing numbers, the localize component supports 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.

dangerousHTML (bool)

If true, HTML is allowed in the translation.

className (string)

Optional CSS classname.

style (object)

Optional inline styling