redux-multilanguage

0.1.2 • Public • Published

Redux Multilanguage

A higher-order component used with Redux to support multilanguage

Demo

Installation

npm install --save redux-multilanguage

or

yarn add redux-multilanguage

Setup

  1. Prepare language.json files. File name should be a unique language code. For example:
//vi.json
{
  "Title": "Tieu de",
  "Name": "Ten",
  "Language": "Ngon ngu"
}
 
//en.json
{
  "Title": "Title",
  "Name": "Name",
  "Language": "Language"
}
  1. Create multilanguage reducer in your root reducer:
// reducers.js
import {combineReducers} from 'redux'
import {createMultilanguageReducer} from 'redux-multilanguage'
 
export default combineReducers({
  multilanguage: createMultilanguageReducer({currentLanguageCode: 'en'}),
  //...
})
  1. Connect your component to redux-multilanguage:
// App.js
import React from 'react'
import {
  languageLoader, 
  multilanguage, 
  changeLanguage, 
  loadLanguages
} from 'redux-multilanguage'
import {connect} from 'react-redux'
 
class App extends React.Component{
  state = {language: 'en'}
  componentDidMount(){
    this.loadLanguages()
  }
  loadLanguages(){
    // Below is to load languages, must call this once on app start,
    // and when user switch to new language that haven't loaded yet.
    this.props.dispatch(loadLanguages({
      languages: {
        vi: require('./vi.json'),
        en: require('./en.json')
      }
    }))
  }
  changeLanguage = (e) => {
    const languageCode = e.target.value
    // To change language:
    this.props.dispatch(changeLanguage(languageCode))
  }
  render(){
    const {
      /*
        Below props are passed by 'multilanguage' HOC.
        'strings' is the JSON of the language file. 
        For example, if 'currentLanguageCode' is 'en', 
        then 'strings' is the content of 'en.json'
       */ 
      strings,
      currentLanguageCode
    } = this.props
    return <div>
      {strings["Title"]}
 
      Change language: <select 
        value={currentLanguageCode} 
        onChange={this.changeLanguage}
      >
        <option value="en">en</option>
        <option value="vi">vi</option>
      </select>
    </div>
  }
}
export default connect()(multilanguage(App))

For more, see full working example.

APIs

Below are what exported by redux-multilanguage

  • [HOC] multilanguage(WrappedComponent): Use this to wrap your component, wrapped component will have these passed props:

    • strings: The JSON of current selected language.
    • currentLanguageCode: The code of current language, to change this, dispatch changeLanguage()
  • [action creator] loadLanguages(config): Load languages, this action should be dispatched when app start or dispatched mutiple times when ever demand to lazy-load languages.

    • config.languages: An object, keys are language codes, equivalent values are json of code-string values. Example:

      dispatch(loadLanguages({
        languages: {
          vi: {Title: 'Tieu de', Name: 'Tên'},
          en: {Title: 'Title', Name: 'Name'}
        }
      }))
      
  • [action creator] changeLanguage(languageCode): an action creator to change language. Example usage: dispatch(changeLanguage('en'))

  • createMultilanguageReducer(initState): returns a reducer for multilanguage in redux store

    • initState.currentLanguageCode: language code to be loaded by default

Readme

Keywords

Package Sidebar

Install

npm i redux-multilanguage

Weekly Downloads

255

Version

0.1.2

License

MIT

Unpacked Size

506 kB

Total Files

30

Last publish

Collaborators

  • rudyhuynh