vivy-i18n

A Vivy plugin which extend Vivy model to implement i18n.

Docs

• Installation
• Examples
  • Examples in repository
  • Complete and real project example
• Documentation
  • Basic usage
  • translate
  • I18n
  • Hooks
    • useI18n
    • useTranslate

Installation

Using npm:

$ npm install vivy vivy-i18n

Examples

Examples in repository

$ cd ./examples/[EXAMPLE_NAME]
$ npm run start

Example names:

• withI18nPlugin

Complete and real project example

• labor-analgesia-frontend

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');