Nabbing Pleasant Monads

    bear-react-locale
    TypeScript icon, indicating that this package has built-in type declarations

    2.0.3 • Public • Published

    bear-react-locale

    Internationalize Elegant intl library based for Reactjs

    NPM npm

    Support Version Map

    React React Scripts Bear React Grid
    18 5.0.1 2.0.0
    17 4.0.3 1.0.10

    Install

    yarn add bear-react-locale

    Usage

    create src/config/locale.ts

    import {TLocaleDictionaries} from 'bear-react-locale';
    
    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 (is not global state)

    import {StateControlLocaleProvider} from 'bear-react-locale';
    import {DEFAULT_LOCALE, localeDictionaries} from './config/locale';
    
    <StateControlLocaleProvider 
        localeDictionaries={localeDictionaries}
        defaultLocale={DEFAULT_LOCALE}
        persistKey="bear-example"
    >
        <AppRoute/>
    </GridThemeProvider>

    if you use redux(global state) link locale, your can create custom Provider in your project

    import React, {Children} from 'react';
    import {LocaleProvider} from 'bear-react-locale';
    import {useDispatch, useSelector} from 'react-redux';
    import {localeDictionaries, DEFAULT_LOCALE, ELocales} from 'config/locale';
    
    // Stores
    import {selector, actions} from 'store/main/language';
    
    interface IProps {
        children: JSX.Element
    }
    
    const LanguageProvider = ({
        children
    }: IProps) => {
        const dispatch = useDispatch();
        const locale = useSelector(selector.selectLanguage);
    
        const handleChangeLocale = (locale: ELocales) => {
            dispatch(actions.setLocale({locale}));
        };
    
        return <LocaleProvider
            localeDictionaries={localeDictionaries}
            defaultLocale={DEFAULT_LOCALE}
            locale={locale}
            setLocale={(locale: string ) => handleChangeLocale(locale as ELocales)}
        >
            {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-locale';
    
    const {i18n} = useLocale();
    
    return <div>{i18n('page.promotion.title', {defaultMessage: 'promotions', params: {country: 'taiwan'}})}</div>

    global function (in not function component) only in provider children component

    import {translateI18n} from 'bear-react-locale';
    translateI18n('page.promotion.title', {defaultMessage: 'promotions', params: {country: 'taiwan'}})
    

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

    Edit react-editext-template

    Component and setup docs

    License

    MIT © imagine10255

    Install

    npm i bear-react-locale

    DownloadsWeekly Downloads

    20

    Version

    2.0.3

    License

    MIT

    Unpacked Size

    1.23 MB

    Total Files

    18

    Last publish

    Collaborators

    • imagine10255