React Internationalization
Simple internationalization of React apps.
Installation
npm install --save react-internationalization
Features
- You can import languages dynamically.
- You can pluralize words in strings.
- You can use
translate()
outside the React component.
Components and methods
<InternationalizationProvider />
This component is used to setup the internationalization context for a tree.
Prop Types
defaultLanguage: PropTypesstringisRequired languages: PropTypesobjectisRequired dynamicImports: PropTypesbool
<Text />
This is main component used for translations.
Prop Types
id: PropTypesstringisRequired values: PropTypesobject pluralize: PropTypesobject
setLanguage(lang: String)
This method used for changing language and translations. You can call this method anywhere in the application.
internationalize(Component: Component)
If you want to use translate(id: String)
function separately from <Text />
component and you are going to change the language, then wrap your component with this HOC.
translate(id: String, values: Object, pluralize: Object)
Call this method in places where you can not use the <Text />
component.
addPluralizationRules(language: String, rules: Object)
This method used for adding your pluralization rules.
Pluralization
Pluralization rules for en
are used by default. If you have more than one
and other
in your language, then you can add your own pluralization rules. Check out the official Unicode CLDR documentation for your language.
// example with 'ru' pluralization rules const rules = count % 10 === 1 && count % 100 !== 11 2 3 4 && !12 13 14 count % 10 === 0 || 5 6 7 8 9 || 11 12 13 14
Simple Example
translations/en.js
const enLang = common: welcome: 'Hello {{name}}, you have {{count}} new {{messages}}!'
translations/index.js
{ return enLang}
app.js
state = name: 'Ivan' newMessages: 4 { const name newMessages = thisstate return <p> <Text id="common.welcome" values= name count: newMessages pluralize= messages: one: 'message' other: 'messages' dependsOn: newMessages /> </p> } ReactDOM
This example would render: "Hello Ivan, you have 4 new messages!" into the root element on the page.
Advanced Example
translations/en.js
const en = statuses: play: 'play' pause: 'pause' app: status: 'Current status: {{status}}' changeStatus: 'Change status' changeLanguage: 'Change language'
translations/ru.js
const ru = statuses: play: 'играет' pause: 'пауза' app: status: 'Текущий статус: {{status}}' changeStatus: 'Сменить статус' changeLanguage: 'Сменить язык'
translations/index.js
//set dynamicImports property on InternationalizationProvider for dynamic imports { return import'./en'} { return import'./ru'}
app.js
state = status: 'play' { this } { } { const status = thisstate return <div> <p> <Text id="app.status" values= status: /> </p> <button style= marginRight: 20 onClick=thischangeStatus> <Text id="app.changeStatus" /> </button> <button onClick=thissetRuLanguage> <Text id="app.changeLanguage" /> </button> </div> } const IntarnationalizedApp = ReactDOM
Contribute
Let's make React Internationalization better! If you're interested in helping, all contributions are welcome and appreciated.
License
MIT License