1.1.0 • Published 4 years ago
mobx-react-i18n v1.1.0
English | 简体中文
mobx-react-i18n
Internationalize React App by mobx
Installation
npm install --save mobx-react-i18n
Getting Started
- Create international files
zh-CN.json
,en-US.json
:
{
"CHINESE": "中文",
"ENGLISH": "英文",
"greeting": "你好",
"btn": {
"confirm": "确认",
"cancel": "取消"
}
}
- Inject your app as a global state by Provider
import { Provider } from "mobx-react";
import {LanguageStore} from 'mobx-react-i18n';
const languageStore = new LanguageStore({
currentLanguage: 'zh-CN',
languageMap: {
'zh-CN': require('./i18n/zh-CN.json'),
'en-US': require('./i18n/en-US.json')
}
});
ReactDOM.render((
<Provider language={languageStore}>
<App />
</Provider>
), document.getElementById("app"));
- Use
<Language />
to translate string literals:
import { Language } from 'mobx-react-i18n';
const Greeting = () => (
<p><Language resource="greeting"/></p>
)
API
Language
<Language />
renders internationalized text.
Parameters
props
props.resource
The key of international files.
LanguageStore
The class that generate global language store.
Parameters
options
options.currentLanguage
set default current languageoptions.languageMap
All international files
property
language.currentLanguage
current language in app
method
language.changeLanguageTo
switch language