├── .babelrc
├── .gitignore
├── Readme.md
├── example
├── .babelrc
├── App.js
├── index.html
├── index.js
├── package.json
├── server.js
├── translations.js
└── webpack.config.js
├── package.json
└── src
├── actions.js
├── context.js
├── index.js
├── provider.js
├── reducer.js
├── utils.js
└── withTranslate.js
/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["env", "stage-0", "react"]
3 | }
4 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store
2 | node_modules
3 | lib
--------------------------------------------------------------------------------
/Readme.md:
--------------------------------------------------------------------------------
1 | # React Multilingual with redux
2 |
3 | A simple and slim (Only 6KB) multi-lingual component for React with Redux without react-intl or react-i18n
4 |
5 | ## Install
6 |
7 | ```
8 | npm i react-redux-multilingual --save
9 | ```
10 |
11 | ## Wiring it up
12 |
13 | ```js
14 | import translations from './translations'
15 | import { IntlReducer as Intl, IntlProvider } from 'react-redux-multilingual'
16 | import { createStore, combineReducers } from 'redux'
17 | import { Provider } from 'react-redux'
18 | import App from './App'
19 |
20 | let reducers = combineReducers(Object.assign({}, { Intl }))
21 | let store = createStore(reducers)
22 |
23 | ReactDOM.render(
24 |
25 |
26 |
27 |
28 |
29 | , document.getElementById('root'))
30 | ```
31 |
32 | ## Translations format
33 | The translations props accepts object in this format
34 |
35 | ```js
36 | {
37 | en: {
38 | locale: 'en-US',
39 | messages: {
40 | hello: 'how are you {name}'
41 | }
42 | },
43 | zh: {
44 | locale: 'zh',
45 | messages: {
46 | hello: '你好！你好吗 {name}'
47 | }
48 | }
49 | }
50 | ```
51 |
52 | ## Translate using hook
53 |
54 | ```js
55 | import { useTranslate } from 'react-redux-multilingual'
56 |
57 | function App () {
58 | const t = useTranslate()
59 |
60 | return (
61 |
62 | {t('hello', { name: 'Foo Bar'})}
63 |
64 | )
65 | }
66 | ```
67 |
68 | ## Translate using higher-order component (HOC)
69 |
70 | ```js
71 | import { withTranslate } from 'react-redux-multilingual'
72 |
73 | const App = ({ translate }) = {
74 | return (
75 |
76 | {translate('hello', { name: 'John Doe' })}
77 |
78 | )
79 | }
80 |
81 | module.exports = withTranslate(App)
82 | ```
83 |
84 | ## Translate using Context
85 |
86 | ```js
87 | const App = (props, context) => {
88 | return (
89 |
90 | {context.translate('hello', { name: 'John Doe' })}
91 |
92 | )
93 | }
94 |
95 | App.contextTypes = {
96 | translate: React.propTypes.func
97 | }
98 |
99 | module.exports = App
100 | ```
101 |
102 | ## Setting the initial locale
103 |
104 | Option 1: Pass your locale to initial state of your reducer
105 | ```js
106 | let store = createStore(reducers, { Intl: { locale: 'zh'}})
107 | ```
108 |
109 | Option 2: Dispatch an action to change locale
110 | ```js
111 | import { IntlActions } from 'react-redux-multilingual'
112 | let store = createStore(reducers)
113 | store.dispatch(IntlActions.setLocale('zh'))
114 | ```
115 |
--------------------------------------------------------------------------------
/example/.babelrc:
--------------------------------------------------------------------------------
1 | {
2 | "presets": ["env", "stage-0", "react"]
3 | }
4 |
--------------------------------------------------------------------------------
/example/App.js:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { connect } from 'react-redux'
3 | import { withTranslate, IntlActions, useTranslate } from 'react-redux-multilingual'
4 |
5 | const App = ({ dispatch }) => {
6 |
7 | const translate = useTranslate()
8 | return (
9 |
10 |
Hey there
11 | {translate('hello')}
12 |
13 |
14 |
18 |
22 |
23 |