react-transboard

react-transboard

• A translation board for making your react app multilingual.

Installation

npm install --save react-transboard

Usage

Top level usage

• react-transboard supplies TranslationProvider, Translator and TranslationViewer components.
  • TranslationProvider is the translation context provider of the app.
    • props:
      • dev is the environment indicator. If true, all relevant widgets will render, otherwise, the current translation will be used without supplying the translation board itself.
      • dict is a dictionary built ahead you can supply for components to use.
  • Translator is the translation board itself.
  • TranslationViewer a cool widget based on react-state-trace which lets you see the translation data as you edit it.

import React from 'react';
import ReactDOM from 'react-dom';
import { 
    TranslationProvider, 
    TranslationViewer, 
    Translator,
} from 'react-transboard';
import AppRouter from './router';
import StoreProvider from './store';

const dict = {
    Spanish: {
        hello: 'hola',
        goodbye: 'adios',
    },
    Russian: {
        hello: 'Привет',
        goodbye: 'до свидания',  
    },
};

const dev = window.DEVELOPMENT;

const App = () => (
    <TranslationProvider 
        dev={dev} 
        dict={dict}
    >
        <Translator/>
        <TranslationViewer/>
        <StoreProvider>
            <AppRouter/>
        </StoreProvider>
    </TranslationProvider>
);

ReactDOM.render(
    <App/>,
    document.getElementById('root')
);

The text in the application

• react-transboard supplies the function t which you should pass your text to using the base language you want to translate from, so the text in your app will be trackable by the Translator.

import React from 'react';
import { t } from 'react-transboard';
import { NavLink } from 'react-router-dom';
import AuthLayout from './Base/AuthLayout';
import LoginForm from './Base/LoginForm';
import LoginMessage from './Base/LoginMessage';

const Login = () => (
    <AuthLayout header={t('Connect to your account')}>
        <LoginForm />
        <LoginMessage>
            <NavLink to='/signup'>
                {t('Join')}
            </NavLink>
        </LoginMessage>
    </AuthLayout>
);

export default Login;

Translation hooks

• react-transboard supplies 2 very useful hooks that expose data and functionality.
  • useTranslations lets you extract:
    • baseLocale which is the base language you translate from.
    • translatedLocales which is an array of the languages you chose to translate to.
    • translations which is the object that holds your translations.
    • translateTo(lang: String) which is a function you can apply to move to a translation.
  • useDict lets you consume the dictionary (if you provided one) provided by TranslationProvider component.

import React from 'react';
import { useTranslations, useDict } from 'react-transboard';

const Info = () => {
    const { baseLocale, translatedLocales, translations, translateTo } = useTranslations();
    const HELLO = useDict('hello');
    
    return (
        <div>
            <p>Base Locale: {baseLocale}</p>
            <ul>
                <li>Translatable Locales:</li>
                {translatedLocales.map(locale =>
                    <li key={locale}>{locale}</li>
                )}
            </ul>
            <div>Translations: {JSON.stringify(translations, null, 2)}</div>
            <div>
                <button onClick={() => translateTo('Spanish')}>Spanish</button>
                <button onClick={() => translateTo('Russian')}>Russian</button>
                <button onClick={() => alert(HELLO)}>
                    Say hello in the current language!
                </button>
            </div>
        </div>
    );
};

export default Info;