redux-react-i18n

An i18n solution with plural forms support for Redux/React

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