Permalink
Browse files

This package provides functionality of redux-react-i18n to React Native

  • Loading branch information...
derzunov committed Nov 29, 2016
1 parent 3cd516b commit fac3015cb274c93069f0b474f94d0a6d013fce93
Showing with 307 additions and 1 deletion.
  1. +3 −0 .babelrc
  2. +44 −0 .gitignore
  3. +14 −0 .npmignore
  4. +165 −1 README.md
  5. BIN i18n-logo.jpg
  6. +46 −0 package.json
  7. +11 −0 src/LocPresentationalRN.js
  8. +13 −0 src/LocRN.js
  9. +11 −0 src/index.js
View
@@ -0,0 +1,3 @@
{
"presets": ["es2015", "react"]
}
View
@@ -0,0 +1,44 @@
################################################
# Local Configuration
################################################
config/local.*
################################################
# Dependencies
################################################
node_modules
bower_components
################################################
# Sails.js / Waterline / Grunt
################################################
.tmp
dump.rdb
################################################
# Node.js / NPM
################################################
lib-cov
*.seed
*.log
*.out
*.pid
npm-debug.log
################################################
# Miscellaneous
################################################
*~
*#
.DS_STORE
.netbeans
nbproject
.idea
.node_history
.npmrc
lib
View
@@ -0,0 +1,14 @@
.babelrc
.editorconfig
.eslintrc
.gitignore
.idea
.npmignore
.travis.yml
node_modules/
gulpfile.js
test.js
./index.html
npm-debug.log
View
166 README.md
@@ -1,2 +1,166 @@
# redux-react-native-i18n
An i18n solution for React Native apps on Redux
An i18n solution for **React Native** apps on Redux
This package provides functionality of [redux-react-i18n](https://github.com/derzunov/redux-react-i18n) to React Native
## Workers of all countries, unite!
![Workers of all countries, unite!](https://raw.githubusercontent.com/derzunov/redux-react-i18n/master/i18n-logo.jpg "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/)
## Short code demo
####Write ( jsx ):
```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 ):
```html
<Text>Перевод вашего первого ключа из словаря для текущего языка</Text>
<Text>Пришла 1 кошечка</Text>
<Text>Пришли 2 кошечки</Text>
<Text>Пришло 5 кошечек</Text>
```
### What am I using:
redux-react-i18n: ( [github](https://github.com/derzunov/redux-react-i18n) or [npm](https://www.npmjs.com/package/redux-react-i18n) )
## Install:
Terminal:
```
npm i redux-react-native-i18n
```
## What's in the box
### Components:
- Loc ( Container Component )
- LocPresentational ( Presentational Component )
### Actions
- setCurrent( 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-native-i18n'
...
// "reducers" contains your reducers
reducers.i18n = i18nReducer
...
const store = createStore( combineReducers( reducers ) )
...
// Set dictionaries (simpliest exapmple) -----------------------------------------------------------------------------------------------
// 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 штучки, пять штучек
/* ... */
/* Other keys */
},
'en-US': {
'key_1': 'First default key',
'key_2': [ '$Count', ' ', ['thing','things']], // 1 thing, 2 things, 153 things
}
/* ... */
/* Other dictionaries */
}
store.dispatch( i18nActions.setDictionaries( dictionaries ) )
// / Set dictionaries (simpliest exapmple) ---------------------------------------------------------------------------------------------
// Set languages (simpliest exapmple) --------------------------------------------------------------------------------------------------
const languages = [
{
code: 'ru-RU',
name: 'Русский'
},
{
code: 'en-US',
name: 'English (USA)'
}
/* ... */
/* Other languages */
]
store.dispatch( i18nActions.setLanguages( languages ) )
// / Set languages (simpliest exapmple) ------------------------------------------------------------------------------------------------
// Set current language code (you can map this action to select component or somth like this)
store.dispatch( i18nActions.setCurrent( 'ru-RU' ) )
```
#### And now you can use "Loc" container component
```jsx
import { Loc } from 'redux-react-native-i18n'
...
<View>
<Loc locKey="key_1"/> // => Первый дефолтный ключ
<Loc locKey="key_2" number={7}/> // => 7 штучек
</View>
```
## 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 )
...
...
...
<Loc locKey="YOUR_KEY_1"/>
<Loc locKey="YOUR_KEY_2" number={42}/>
```
See more in src/\*.js
View
Binary file not shown.
View
@@ -0,0 +1,46 @@
{
"name": "redux-react-native-i18n",
"version": "0.0.1",
"description": "An i18n solution for React Native apps on Redux",
"main": "lib/index.js",
"scripts": {
"test": "echo \"Error: no test specified\"",
"compile": "babel src -d lib",
"prepublish": "npm run compile",
"build": "npm run compile"
},
"devDependencies": {
"babel-cli": "^6.18.0",
"babel-core": "^6.18.0",
"babel-preset-es2015": "^6.18.0",
"babel-preset-react": "^6.16.0"
},
"repository": {
"type": "git",
"url": "git+https://github.com/derzunov/redux-react-native-i18n.git"
},
"keywords": [
"redux",
"i18n",
"localization",
"internationalization",
"react",
"l10n",
"react native",
"native"
],
"author": "derzunov <derzunov.work@gmail.com>",
"license": "MIT",
"bugs": {
"url": "https://github.com/derzunov/redux-react-native-i18n/issues"
},
"homepage": "https://github.com/derzunov/redux-react-native-i18n#readme",
"dependencies": {
"react": "^15.3.2",
"react-redux": "^4.4.5",
"react-native": "^0.38.0",
"redux": "^3.6.0",
"translatr": "^0.1.6",
"redux-react-i18n": "^0.3.27"
}
}
View
@@ -0,0 +1,11 @@
import translate from 'translatr'
import React from 'react'
import { Text } from 'react-native'
const Loc = ({ currentLanguage, locKey, number, dictionary }) => {
return <Text>
{ translate( dictionary, currentLanguage, locKey, number ) }
</Text>
}
export default Loc
View
@@ -0,0 +1,13 @@
import React from 'react'
import { connect } from 'react-redux'
// Import presentational component
import Loc from './LocPresentationalRN'
// The component expects that reducer will be named as i18n
const mapStateToProps = ( { i18n: { currentLanguage, dictionaries } }, ownProps ) => ({
currentLanguage,
dictionary: dictionaries[ currentLanguage ]
})
export default connect( mapStateToProps )( Loc )
View
@@ -0,0 +1,11 @@
import i18nActions from 'redux-react-i18n'
export { i18nActions }
import i18nReducer from 'redux-react-i18n'
export { i18nReducer }
// You can use the complete scheme of store/reducers/actions proposed by author
export { default as Loc } from './LocRN'
// Or you can just take a presentational container and map state to props by yourself
export { default as LocPresentational } from './LocPresentationalRN'

0 comments on commit fac3015

Please sign in to comment.