react-i18loader is a webpack loader for React (or React framework, e.g. Next.js) i18n(Internationalization) solution.
- Extract the sentences to be translated from the target file.
- Generate a JSON file corresponding to target file and fill in the extracted sentences.
- Loader will hanler the target file to import this JSON file and add a method to retrieve the translations.
- Change the $lang in props (You can change it in state or get the value by function, depends on your webpack config) to change the APP language.
First install it:
npm install react-i18loader --save-dev
{
test: /\.(js|jsx)$/, // this loader will generate *.lang.json beside *.jsx files
exclude: [
/(node_modules)|(\.next)/,
],
use: {
loader: "react-i18loader",
options: {
// The folder where store the language json file.
// If storePath value is null or empty, the language json file would store corresponding to target js/jsx file
storePath: "locales",
languages: ["zh_Hans_CN", "zh_Hant_HK", "en_US"], // The langauages that you App supported
}
}
}
hello.js
import React, { Component } from "react";
@i18n("Hello")
export default class Hello extends Component {
constructor(props) {
super(props);
}
render() {
const msg = "我是简体";
return <div>
<p>你好，欢迎使用react-i18loader，发现代码之美</p>
<p>{msg}</p>
</div>
}
}
- You need to change the
$langinpropsto change the language
index.js
import React, { Component } from "react";
import Hello from "../components/hello";
export default class Index extends Component {
constructor(props) {
super(props);
this.state = {
lang: "zh_Hans_CN"
};
}
changeLang(lang) {
this.setState({lang});
}
render() {
return <div>
<button onClick={this.changeLang.bind(this, "zh_Hans_CN")}>简体中文</button>
<button onClick={this.changeLang.bind(this, "zh_Hant_HK")}>繁體中文</button>
<button onClick={this.changeLang.bind(this, "en_US")}>English</button>
<Hello $lang={this.state.lang}/>
</div>
}
}
{
// this loader will generate *.lang.json beside *.jsx files
test: /\.(js|jsx)$/,
exclude: [
/(node_modules)|(\.next)/,
],
use: {
loader: "react-i18loader",
options: {
// The folder where store the language json file.
// If storePath value is null or empty, the language json file would store corresponding to target js/jsx file
storePath: "locales",
// Required fields.
// The langauages that you App supported
languages: ["zh_Hans_CN", "zh_Hant_HK", "en_US"],
// Optional fields.
// The target component object where the loader will put a filed "$lang" in.
method: "props", // It could be these three values: props, state, func
// The content to be translated. And the content must accord with this RegEx, default value is Chinese Simplified
regText: "[\u4e00-\u9fa5\u3002\uff1b\uff0c\uff1a\u2018\u2019\u201c\u201d\uff08\uff09\u3001\uff1f\uff01\ufe15\u300a\u300b]+",
}
}
}
Indicate the folder where store the language json file. If storePath value is null or empty, the language json file would store corresponding to target js/jsx file.
It should be an array which could contain the target language. You can also add Ja_JP, In_In ,bala and so on to this array.
Based on the regular text regText, you can extract the matching text as the translation source.
So if you want to translate Chinese into other languages，you should set：
regText: "[\u4e00-\u9fa5\u3002\uff1b\uff0c\uff1a\u2018\u2019\u201c\u201d\uff08\uff09\u3001\uff1f\uff01\ufe15\u300a\u300b]+"
Property method could be these three values: props, state, func. Its default value is props.
| value | description |
|---|---|
| props | An property name $lang would add to the props of React component, so you need to change the props.$lang to change the web language. For more information, please refer the set_lang_via_props in examples folder |
| state | An property name $lang would add to the state of React component, so you need to change the state.$lang to change the web language. For more information, please refer the set_lang_via_state in examples folder |
| func | You need to add a method $getLang() {return XXX; // The language code like 'zh_Hans_CN' to your React component}. For more information, please refer the set_lang_via_func in examples folder |
 |
|---|