bear-react-toaster_test v1.0.0

bear-react-toaster

Internationalize Elegant intl library based for Reactjs

Install

yarn add bear-react-toaster

Usage

create src/config/locale.ts

import {TLocaleDictionaries} from 'bear-react-toaster';

export enum ELocales {
    enUS = 'en-US',
    zhTW = 'zh-TW',
    jaJP = 'ja-JP',
}

export const localeDictionaries: TLocaleDictionaries = {
    [ELocales.enUS]: require('locales/en-US').default,
    [ELocales.zhTW]: require('locales/zh-TW').default,
    [ELocales.jaJP]: require('locales/ja-JP').default,
};

in your src/app.tsx add

import {LocaleControlProvider} from 'bear-react-toaster';
import {DEFAULT_LOCALE, localeDictionaries} from './config/locale';

<LocaleControlProvider 
   localeDictionaries={localeDictionaries}
    defaultLocale={DEFAULT_LOCALE}
    persistKey="bear-example"
>
    <AppRoute/>
</GridThemeProvider>

if you use redux link locale, your can create custom Provider in your project

interface IProps {
    children: JSX.Element
}

const LanguageProvider = ({
    children
}: IProps) => {
    const locale = useSelector(selector.selectLanguage);

    return <LocaleProvider
        localeDictionaries={localeDictionaries}
        defaultLocale={DEFAULT_LOCALE}
        locale={locale}
    >
        {Children.only(children)}
    </LocaleProvider>;
};

export default LanguageProvider;

then in your src/app.tsx

const App = () => {
    return (
        <Provider store={setup.store}>
            <LanguageProvider>
                <AppRoute/>
            </LanguageProvider>
        </Provider>
    );
};

How to use

function component hook

import {useLocale} from 'bear-react-toaster';

const {i18n} = useLocale();

return <div>{i18n('page.promotion.title', {defaultMessage: 'promotions', params: {country: 'taiwan'}})}</div>

global function in not function component

window.translateI18n('page.promotion.title', {defaultMessage: 'promotions', params: {country: 'taiwan'}})

There is also a codesandbox template that you can fork and play with it:

Component and setup docs

License

MIT © imagine10255