https://github.com/rmdort/react-redux-multilingual

A simple and slim multi-lingual component for React with Redux without react-intl or react-i18n
https://github.com/rmdort/react-redux-multilingual

Last synced: 18 days ago
JSON representation

A simple and slim multi-lingual component for React with Redux without react-intl or react-i18n

• Host: GitHub
• URL: https://github.com/rmdort/react-redux-multilingual
• Owner: rmdort
• Created: 2016-06-20T07:05:06.000Z (over 8 years ago)
• Default Branch: master
• Last Pushed: 2020-03-28T04:06:27.000Z (over 4 years ago)
• Last Synced: 2024-10-13T18:48:12.619Z (about 1 month ago)
• Language: JavaScript
• Homepage:
• Size: 28.3 KB
• Stars: 41
• Watchers: 4
• Forks: 14
• Open Issues: 1
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        
# React Multilingual with redux

A simple and slim (Only 6KB) multi-lingual component for React with Redux without react-intl or react-i18n

## Install

```

npm i react-redux-multilingual --save

```

## Wiring it up

```js

import translations from './translations'

import { IntlReducer as Intl, IntlProvider } from 'react-redux-multilingual'

import { createStore, combineReducers } from 'redux'

import { Provider } from 'react-redux'

import App from './App'

let reducers = combineReducers(Object.assign({}, { Intl }))

let store = createStore(reducers)

ReactDOM.render(

  

    

      

    

  

, document.getElementById('root'))

```

## Translations format

The translations props accepts object in this format

```js

{

  en: {

    locale: 'en-US',

    messages: {

      hello: 'how are you {name}'

    }

  },

  zh: {

    locale: 'zh',

    messages: {

      hello: '你好！你好吗 {name}'

    }

  }

}

```

## Translate using hook

```js

import { useTranslate } from 'react-redux-multilingual'

function App () {

  const t = useTranslate()

  return (

    


      {t('hello', { name: 'Foo Bar'})}

    

  )

}

```


## Translate using higher-order component (HOC)

```js

import { withTranslate } from 'react-redux-multilingual'

const App = ({ translate }) = {

  return (

    


      {translate('hello', { name: 'John Doe' })}

    

  )

}


module.exports = withTranslate(App)

```

## Translate using Context

```js

const App = (props, context) => {

  return (

    


      {context.translate('hello', { name: 'John Doe' })}

    

  )

}


App.contextTypes = {

  translate: React.propTypes.func

}

module.exports = App

```

## Setting the initial locale

Option 1: Pass your locale to initial state of your reducer

```js

let store = createStore(reducers, { Intl: { locale: 'zh'}})

```

Option 2: Dispatch an action to change locale

```js

import { IntlActions } from 'react-redux-multilingual'

let store = createStore(reducers)

store.dispatch(IntlActions.setLocale('zh'))

```