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 ="your_key_1"/><Loc ="your_key_2" =/><Loc ="your_key_2" =/><Loc ="your_key_2" =/>
Result ( html ):
Перевод вашего первого ключа из словаря для текущего языкаПришла 1 кошечкаПришли 2 кошечкиПришло 5 кошечек
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 reducersreducersi18n = i18nReducer... const store = ...// 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 projectconst 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// / Set dictionaries (simpliest example) --------------------------------------------------------------------------------------------- // Set languages (simpliest example) --------------------------------------------------------------------------------------------------const languages = code: 'ru-RU' name: 'Русский' code: 'en-US' name: 'English (USA)' /* ... */ /* Other languages */ store// / Set languages (simpliest example) ------------------------------------------------------------------------------------------------ // Set current language code (you can map this action to select component or somth like this)store
And now you can use "Loc" container component
import Loc from 'redux-react-i18n'... <p> <Loc ="key_1"/> // => Первый дефолтный ключ</p> <p> <Loc ="key_2" =/> // => 7 штучек</p> <p> <Loc ="key_3.nested_1"/> // => Первый вложенный ключ</p><p> <Loc ="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 LocPresentationalimport 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 = LocPresentational .........<p> <Loc ="YOUR_KEY_1"/></p> <p> <Loc ="YOUR_KEY_2" =/></p>
See more in src/*.js
Using with React Native
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