lofwalter/react-i18n

Gettext style i18n in React that supports component interpolation.

react-i18n

React i18n

npm i r-i18n --save

Usage

import React from 'react'

import {
  createI18n
  debug, 
} from 'r-i18n'

Samples

init

Use Jed to initialize i18n in your project.

const i18n = createI18n({ /* jed options */ })) 

t

Component as placeholder

const {t} = i18n

t('Welcome to Strikingly')  
// -> '欢迎使用 Strikingly'

t('Welcome to Strikingly, %{username}', { username: 'Shu' }) 
// -> '欢迎使用 Strikingly，Shu'

// React component as placeholder

t('%{author} assigned this event to %{assignee}', {
  author: <Author value={author} />,
  assignee: <em>[email protected]</em>
})
// -> [<Author value={author} />, ' assigned this event to ', <em>[email protected]</em>]

tct

HTML inside translated string with a root wrapper

const {tct} = i18n

//...

tct('Welcome. Click [link:here]', {
  root: <p/>,
  link: <a href="#" />
})
// -> <p>欢迎。点击 <a href="#">此处</a> 继续。</p>

Debug & mark

Wrap t and tct with a wrapper <span class="translation-wrapper"/>

(for React Native, it just appends a flag emoji to the message)

import {createI18n, debug} from 'r-i18n'

//...
const i18n = createI18n({ /* jed options */ })) 
debug()

i18n.tct('Welcome. Click [link:here]', {
  root: <p/>,
  link: <a href="#" />
})
// -> <span class="translation-wrapper">
//      <p>欢迎。点击 <a href="#">此处</a> 继续。</p>
//    </span>

React Native

React-i18n works both with React and React Native.
For React Native, use npm i rn-i18n --save.

React Native branch: react-native

Syntax

r-i18n uses %{} to pass args.
And use %% to escape %.

i.e. t('%{percentage}%% correct', { percentage: 100 }) -> '100% correct'

Acknowledgement

Sentry

Post about i18n and React on Sentry blog: link.

Sentry source code on GitHub.

License of Sentry.

sprintf.js

License of sprintf.js