README
React Multi-Lingual
This package can handle strings and css files and workes on top of redux. I used react-redux connect function codebase
Installation
npm i -S react-multilingual
A glimpse on how you handle your stuff would be easy as this. for better clarifications see example folder and run it by
npm install && npm run example
locale.js
export default {
fa: {
hello: "سلام"
},
en: {
hello: "hello"
}
}
Note that this could be a nested object and as deep as you want, to hold all strings and translations.
store.js
Note that "en.css" and "fa.css" should be accessible from public html file (they will be injected at run-time). In this example they are located at 'example/public' directory.
import {combineReducers, createStore, applyMiddleware, compose} from 'redux';
import {localeReducer, cssLazyLoader} from "react-multilingual";
export const store = createStore(combineReducers({
locale: localeReducer("en", require("../../locales/index").default)
}),
applyMiddleware(
cssLazyLoader(["LOCALE_CHANGED"], {
"en": {address: "en.css", direction: "ltr"},
"fa": {address: "fa.css", direction: "rtl"}
}),
)
);
DashboardContainer.jsx
import React, {Component} from "react";
import {translatable} from "react-multilingual";
@translatable(({hello}) => ({hello}))
export default class DashboardContainer extends Component {
render() {
let {hello, changeLocale} = this.props;
return (
<div>
<button onClick={() => changeLocale("en")}>en</button>
<button onClick={() => changeLocale("fa")}>fa</button>
<p>
{hello}
</p>
</div>
);
}
}
Which could be written like this too:
import React, {Component} from "react";
import {translatable} from "react-multilingual";
class DashboardContainer extends Component {
render() {
let {hello, changeLocale} = this.props;
return (
<div>
<button onClick={() => changeLocale("en")}>en</button>
<button onClick={() => changeLocale("fa")}>fa</button>
<p>
{hello}
</p>
</div>
);
}
}
const mapTranslationsToProps = ({hello}) => ({hello});
export default translatable(mapTranslationsToProps)(DashboardContainer);