ThreeEyedRaven's localization library
Motivation
One of the most painful problem that we repeatedly face when making application is localization (aka internationalization, i18n, multiple language, etc ...). There's a lot of library support localization in react-js, react-native, node-js, but the most painful thing was not how to implement the localization, but how to co-operate with client or 3rd-party team to make the translate. Thousand of text must be gathered, versioned, translated, updated in daily or even hourly basis.
TER-Localization, with new approach method, provide a solution which can speed up everything, include:
- Easy start without any configuration
- Collect the translate text from source code
- Collect the translate text run-time (even for dynamic text, like error return from server)
- Translate by UI, providable to customer / 3rd-party translate team
- Sync with google spreadsheet
User manual
Guide | Path | |
---|---|---|
01 | How to use GDrive Sync | GDrive Sync |
Installation
Install with npm or yarn
yarn add ter-localization
yarn global add ter-localization-cli
Start to get the UI
ter-localization-cli serve
Most of information is default. You can just click the button and go.
Config inside the code
Write the translation centralization file, usually inside the ${storage_path}
folder
import en from './en';
import jp from './jp';
import { TranslateService } from 'ter-localization';
TranslateService.setConfig(require('./config'));
TranslateService.setTranslate({
en,
jp,
});
TranslateService.setLanguage('en');
export default TranslateService;
In side your component
import './localization/index'; // one time import in very top class is okie. no need to import this in every file
import {translateWrapper} from 'ter-localization';
render() {
const { t } = this.props;
return (
<Text>
{t('some_key')}
</Text>
);
}
export default translateWrapper('your_group')(App);
Or using with LocalizationComponent Extends
import {LocalizationComponent} from 'ter-localization';
class AddModal extends LocalizationComponent {
translationGroup = 'your_group';
componentDidMount() {
super.componentDidMount(); // remember this line, REMEMBER!!!
// Other code in componentDidMount
}
}
Or you can use standalone code
import { TranslateService } from 'ter-localization';
// use it
TranslationService.t('group')('key');
Then run your application. The new translation will be automatically added to all the translation file
Global function
Install global
yarn global add ter-localization
Command | Description |
---|---|
serve | Start server to listen and edit localization |
Serve
TER-Localization start a server to listen to new word added and provide UI edit for translation
The UI will be provided with information in the config file. Default will be http://localhost:5050
Params
Params | Short | Description | Default |
---|---|---|---|
--config | -c | Path to config file | ./src/localization/config.json |