redux-react-i18n

    2.0.1 • Public • Published

    redux-react-i18n

    Build Status npm npm Package Quality

    Package Quality

    An i18n solution with plural forms support for Redux/React

    Workers of all countries, unite!

    Workers of all countries, unite!

    Supported languages list with expected codes for pluralize mechanics switching

    • Russian ( ru, ru-RU )
    • English ( en, en-US, en-UK )
    • French ( fr )
    • German ( de )
    • Polish ( pl )
    • Czech ( cs )
    • Portuguese ( pt )
    • Brazilian Portuguese ( pt-BR, br )
    • Arabic ( ar-AR, ar )
    • Turkish ( tr )
    • Occitan ( oc )
    • Belarusian ( be )
    • Bosnian ( bs )
    • Croatian ( hr )
    • Serbian ( sr )
    • Ukrainian ( uk )
    • ...

    Example Demo

    derzunov.github.io/redux-react-i18n

    What's in demo?

    • webpack/gulp dev/prod build system
    • languages:
      • English
      • Russian
      • Polish
      • French
      • Belarusian
      • ...
    • language switcher component
    • simple key demo
    • key with pluralization demo
    git clone https://github.com/derzunov/redux-react-i18n redux-react-i18n
    cd redux-react-i18n/example
    npm i
    

    and then

    gulp
    

    or

    gulp prod
    

    Short code demo

    Write ( jsx ):

    <Loc locKey="your_key_1"/>
    <Loc locKey="your_key_2" number={1}/>
    <Loc locKey="your_key_2" number={2}/>
    <Loc locKey="your_key_2" number={5}/>

    Result ( html ):

    <span>Перевод вашего первого ключа из словаря для текущего языка</span>
    <span>Пришла 1 кошечка</span>
    <span>Пришли 2 кошечки</span>
    <span>Пришло 5 кошечек</span>

    What am I using:

    pluralizer: ( github or npm ) for plural forms changing

    translator: ( github or npm ) for translation (translator demo)

    Install:

    Terminal:

    npm i redux-react-i18n
    

    What's in the box

    Components:

    • Loc ( Container Component )
    • LocPresentational ( Presentational Component )

    Actions

    • setCurrentLanguage( languageCode )
    • setLanguages( languageCode )
    • addDictionary( languageCode, dictionary )
    • setDictionaries( dictionaries )

    Reducer

    • i18n

    Full code demo ( complete solution for Redux ):

    import { i18nReducer, i18nActions, Loc } from 'redux-react-i18n'
     
    ...
    // "reducers" contains your reducers
    reducers.i18n = i18nReducer
    ...
     
    const store = createStore( combineReducers( reducers ) )
     
    ...
    // Set dictionaries (simpliest example) -----------------------------------------------------------------------------------------------
     
    // This dictionaries can be supported by Localization team without need to know somth about interface or project,
    // and you just can fetch it to your project
    const dictionaries = {
        'ru-RU': {
            'key_1': 'Первый дефолтный ключ',
            'key_2': [ '$Count', ' ', ['штучка','штучки','штучек']], // 1 штучка, 3 штучки, пять штучек
            'key_3': {
                'nested_1': 'Первый вложенный ключ',
                'nested_2': 'Второй вложенный ключ',
            },
            /* ... */
            /* Other keys */
        },
        'en-US': {
            'key_1': 'First default key',
            'key_2': [ '$Count', ' ', ['thing','things']], // 1 thing, 2 things, 153 things
            'key_3': {
                'nested_1': 'First nested key',
                'nested_2': 'Second nested key',
            },
        }
        /* ... */
        /* Other dictionaries */
    }
    store.dispatch( i18nActions.setDictionaries( dictionaries ) )
    // / Set dictionaries (simpliest example) ---------------------------------------------------------------------------------------------
     
    // Set languages (simpliest example) --------------------------------------------------------------------------------------------------
    const languages = [
        {
            code: 'ru-RU',
            name: 'Русский'
        },
        {
            code: 'en-US',
            name: 'English (USA)'
        }
        /* ... */
        /* Other languages */
    ]
     
    store.dispatch( i18nActions.setLanguages( languages ) )
    // / Set languages (simpliest example) ------------------------------------------------------------------------------------------------
     
    // Set current language code (you can map this action to select component or somth like this)
    store.dispatch( i18nActions.setCurrentLanguage( 'ru-RU' ) )

    And now you can use "Loc" container component

    import { Loc } from 'redux-react-i18n'
    ...
     
    <p>
      <Loc locKey="key_1"/> // => Первый дефолтный ключ
    </p>
     
    <p>
      <Loc locKey="key_2" number={7}/> // => 7 штучек
    </p>
     
    <p>
      <Loc locKey="key_3.nested_1"/> // => Первый вложенный ключ
    </p>
    <p>
      <Loc locKey="key_3.nested_2"/> // => Второй вложенный ключ
    </p>

    If you don't want to use a complete solution:

    Just use a dumb component and you can design store/actions/reducers by yourself like you want

    // Just import presentational component LocPresentational
    import { LocPresentational } from 'redux-react-i18n'
    ...
    ...
    ...
    // Then map data to props => currentLanguage, dictionary (See more in src/Loc.js):
    const mapStateToProps = ( { /*getting data from the state*/ }, ownProps ) => ({
        currentLanguage: yourCurrentLanguageFromState,
        dictionary: yourDictionaryFromState
    });
    Loc = connect( mapStateToProps )( LocPresentational )
    ...
    ...
    ...
    <p>
      <Loc locKey="YOUR_KEY_1"/>
    </p>
     
    <p>
      <Loc locKey="YOUR_KEY_2"  number={42}/>
    </p>

    See more in src/*.js

    Using with React Native

    redux-react-native-i18n

    The "Span Problem"

    If the span tag is a big problem (in "option" tag for example), you can use translate from 'translatr' like this

    import translate from 'translatr'
    ...
    ...
    ...
    <select>
       <option value="1">
          { translate( dictionary, currentLanguage, key, number ) }
       </option>
    </select>
    ...
    

    and just a simple example of mapStateToProps as a bonus:

    const mapStateToProps = ( {i18n: { currentLanguage, dictionaries }}, ownProps ) => ({
        currentLanguage: currentLanguage,
        dictionary: dictionaries[ currentLanguage ]
    });
    

    Why?

    With <Loc locKey="your_key" ></Loc> you'll get:

    <select>
      <option> <span>Translated Text</span> </option>
    </select>
    

    With translate you'll get:

    <select>
      <option> Translated Text </option>
    </select>
    

    ... but you'll have to write extra code

    PS You already have translatr as a dependency of redux-react-i18n in your node_modules

    Install

    npm i redux-react-i18n

    DownloadsWeekly Downloads

    199

    Version

    2.0.1

    License

    MIT

    Unpacked Size

    2.16 MB

    Total Files

    40

    Last publish

    Collaborators

    • derzunov