Awesome Open Source
Awesome Open Source

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


Get A Weekly Email With Trending Projects For These Topics
No Spam. Unsubscribe easily at any time.
Javascript (1,541,393
Reactjs (70,913
Redux (13,040
I18n (1,746
Localization (1,429
English (707
Internationalization (617
Countries (500
Russian (361
Arabic (293
German (285
L10n (279
French (229
Related Projects