Nanoprogrammed Penultimate Musicianship
Learn about our RFC process, Open RFC meetings & more.Join in the discussion! »

react-i18n-interpolation

0.3.0 • Public • Published

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.

Install

npm i react-i18n-interpolation

DownloadsWeekly Downloads

1

Version

0.3.0

License

MIT

Last publish

Collaborators

  • avatar