vivy-i18n
A Vivy plugin which extend Vivy model to implement i18n.
Docs
Installation
Using npm:
$ npm install vivy vivy-i18nExamples
Examples in repository
$ cd ./examples/[EXAMPLE_NAME]
$ npm run startExample names:
Complete and real project example
Documentation
Basic usage
index.js
import React from 'react';
import {render} from 'react-dom';
import {Provider} from 'react-vivy';
// Import Vivy
import Vivy from 'vivy';
// Import Vivy i18n plugin
import VivyI18n from 'vivy-i18n';
// Import your component and model
import App from 'path_to_app_component';
import app from 'path_to_app_model';
// Create vivy
const vivy = Vivy();
// Apply I18n plugin
vivy.use(VivyI18n());
// Create store after configuration
const store = vivy.createStore();
// Register vivy models
store.registerModels([
app
]);
render(
<Provider store={store}>
<App/>
</Provider>,
document.getElementById('app-container')
);App.js
import React from 'react';
// Import I18n translate component from plugin.
import {I18n} from 'vivy-i18n';
const App = () => (
<I18n index="app/title"/>
);
export default App;app.js
export default {
nameSpace: 'app',
i18ns: {
'en-US': {
title: 'Vivy I18n exmaple'
},
'zh-ZN': {
title: 'Vivy I18n 例子'
}
}
};You can find detail usage in form.js.
translate
Get the i18n value in the right language. You can use it everywhere, but it won't change when language state changed.
import {translate} from 'vivy-i18n';
const i18nValue = useTranslate('model_name_space/i18n_key');I18n
Get the i18n value in the right language. You can use it in React components.
import {I18n} from 'vivy-i18n';
const App = () => (
<I18n index="app/title"/>
);Hooks
useI18n
import {useI18n} from 'vivy-i18n';
const [{language, defaultLanguage}, {translate, switchLanguage, switchDefaultLanguage}] = useI18n();useTranslate
import {useTranslate} from 'vivy-i18n';
const i18nValue = useTranslate('model_name_space/i18n_key');