https://github.com/derzunov/redux-react-i18n
An i18n solution for React/Redux and React Native projects
https://github.com/derzunov/redux-react-i18n
arabic belorusian countries czech english french german i18n internationalization l10n localization pluralization pluralizer polish react redux russian serbian ukrainian
Last synced: 5 months ago
JSON representation
An i18n solution for React/Redux and React Native projects
- Host: GitHub
- URL: https://github.com/derzunov/redux-react-i18n
- Owner: derzunov
- License: mit
- Created: 2016-11-01T16:06:24.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2023-10-27T01:41:05.000Z (over 2 years ago)
- Last Synced: 2025-11-16T00:03:38.777Z (7 months ago)
- Topics: arabic, belorusian, countries, czech, english, french, german, i18n, internationalization, l10n, localization, pluralization, pluralizer, polish, react, redux, russian, serbian, ukrainian
- Language: JavaScript
- Homepage: https://derzunov.github.io/redux-react-i18n/
- Size: 1.72 MB
- Stars: 64
- Watchers: 1
- Forks: 5
- Open Issues: 30
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
- awesome-redux - **redux-react-i18n** - An i18n solution for redux/react✌🏿✊🏽🤘🏻
- fucking-awesome-redux - **redux-react-i18n** - An i18n solution for redux/react✌🏿✊🏽🤘🏻
- awesome-react - redux-react-i18n - An i18n solution for redux/react
README
# redux-react-i18n
[](https://travis-ci.org/derzunov/redux-react-i18n)
[](https://www.npmjs.com/package/redux-react-i18n)
[](https://www.npmjs.com/package/redux-react-i18n)
[](http://packagequality.com/#?package=redux-react-i18n)
[](http://packagequality.com/#?package=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](https://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 ):
```jsx
```
#### Result ( html ):
```html
Перевод вашего первого ключа из словаря для текущего языка
Пришла 1 кошечка
Пришли 2 кошечки
Пришло 5 кошечек
```
### What am I using:
pluralizer: ( [github](https://github.com/derzunov/pluralizer) or [npm](https://www.npmjs.com/package/pluralizr) ) for plural forms changing
translator: ( [github](https://github.com/derzunov/translator) or [npm](https://www.npmjs.com/package/translatr) ) for translation ([translator demo](https://derzunov.github.io/translator/))
## 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 ):
```jsx
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
```jsx
import { Loc } from 'redux-react-i18n'
...
// => Первый дефолтный ключ
// => 7 штучек
// => Первый вложенный ключ
// => Второй вложенный ключ
```
## 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
```jsx
// 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 )
...
...
...
```
See more in src/\*.js
## Using with React Native
[redux-react-native-i18n](https://github.com/derzunov/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'
...
...
...
{ translate( dictionary, currentLanguage, key, number ) }
...
```
and just a simple example of **mapStateToProps** as a bonus:
```
const mapStateToProps = ( {i18n: { currentLanguage, dictionaries }}, ownProps ) => ({
currentLanguage: currentLanguage,
dictionary: dictionaries[ currentLanguage ]
});
```
#### Why?
With `````` you'll get:
```
Translated Text
```
With ```translate``` you'll get:
```
Translated Text
```
... but you'll have to write extra code
PS You already have [translatr](https://github.com/derzunov/translator) as a dependency of redux-react-i18n in your node_modules