react-i18n-interpolation

String interpolation of translated text and React components.

Intended for gettext or similar translation APIs (where the key is the intended text in the developer's locale).

TLDR

• Two functions
  • gettext
    • Simple translation with template string as translation lookup key
  • ngettext
    • Singular/Plural aware translation with template string as translation lookup key
• Two ways of invoking
  • direct substitutions (simple values)
    • Immediately substituted, same as normal template literals.
    • Occurs before translation.
    • Only permitted for primitives string, number, boolean, etc.
  • object substitutions (single key/value)
    • The key gives your translator context (and needs to survive translation).
    • The value is substituted after translation.

gettext

• Without Substitution:

gettext`foo`

• With Substitution:

gettext`Welcome to ${{location: 'Jurassic Park'}}`

• jsx:

gettext`For more ${{link: <a href="http://google.com">{gettext`information`}</a>}}`

ngettext

• Without Substitution:

ngettext(planets)`Hello world!|Hello worlds!`

| | input | output | |---------------|-------------------|-----------------| | singular | planets === 1 | "Hello World!" | | plural | otherwise | "Hello Worlds!" |

• With Substitution:

ngettext(days)`Only one day to go!|${{daysLeft: days}} days to go!`

| | input | output | |---------------|-----------------|-------------------------| | singular | days === 1 | "Only one day to go!" | | plural | days === 9 | "9 days to go!" |

In Greater Depth

For a more detailed examination of usage, the projects motivation and other options see this documentation or check out the examples directory.

Installation

Install the package

$ npm install --save react-i18-interpolation

Choose a translation package, for example node-gettext.

$ npm install --save node-gettext

Setup

Setup in your application.

import NodeGettext from 'node-gettext';
import {factory} from 'react-i18-interpolation';

const nodeGettext = new NodeGettext();
nodeGettext.addTextdomain(...);
nodeGettext.textdomain(...);

const {gettext, ngettext} = factory({gettext: nodeGettext});

We recommend you distribute these method(s) to components by redux, or failing that but context. Using redux allows your UI to respond to changes in text domain real-time.