An i18n solution with plural forms support for Redux/React
- 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 )
- ...
derzunov.github.io/redux-react-i18n
- 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 <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}/><span>Перевод вашего первого ключа из словаря для текущего языка</span> <span>Пришла 1 кошечка</span> <span>Пришли 2 кошечки</span> <span>Пришло 5 кошечек</span>pluralizer: ( github or npm ) for plural forms changing
translator: ( github or npm ) for translation (translator demo)
Terminal:
npm i redux-react-i18n - Loc ( Container Component )
- LocPresentational ( Presentational Component )
- setCurrentLanguage( languageCode )
- setLanguages( languageCode )
- addDictionary( languageCode, dictionary )
- setDictionaries( dictionaries )
- i18n
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' ) )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>// 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
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 ] }); 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