- npm
$ npm i rxi18n --save
- yarn
$ yarn add rxi18n
Translation file is a flat json key map
{
"key1":"translation2",
"key2":"translation2"
}
import {myReducer} from "./myReducer"
import {reducer as rxi18n} from "rxi18n"
const appReducer = combineReducers({
myReducer,
rxi18n
})
With custom reducer name
import {myReducer} from "./myReducer"
import {reducer as myI18nReducer, setReducerName} from "rxi18n"
setReducerName('myI18nReducer')
const appReducer = combineReducers({
myReducer,
myI18nReducer
})
With Saga :
import {actions as rxi18nActions} from "rxi18n"
//do loading process...
//then add 'en' translations to the rxi18n state
yield put(rxi18nActions.addTranslations('en', translations))
//switch lang to 'en'
yield put(rxi18nActions.setLang('en'))
actions :
- addTranslations (lang, translations)
- setLang (lang)
selectors :
- lang(state) //current lang iso
- translations(state) // translations of current lang
- isLangAvailable(state, lang)
- t(state, { key, replacements, number })
import {localize} from "rxi18n"
@localize()
export default class MyComponent extends PureComponent{
}
or
import {localize} from "rxi18n"
class MyComponent extends PureComponent{
}
export default localize()(MyComponent)
import {localize} from "rxi18n"
@localize()
export default class MyComponent extends PureComponent{
render(){
const {t} = this.props;
return (
<span>{t('key1')}</span>
)
}
}
{
greetings: "hello world"
}
t("greetings") //hello world
{
greetings: "Hello {name}!"
}
t("greetings", {name: "Big Boss"}) //Hello Big Boss!
{
text: "{0} There are no {items}!"+
"|[1,3] You have one, two or three {items}."+
"|{4} Four is a great number of {items}!" +
"|[5,*]The number of {items} you have is uncountable!"
}
const replacements = {items:'books'}
t("text", replacements, 3)
//You have one, two or three books
t(key, replacements, number)