react-multilingual

multilingual feature on strings | text and css style

Usage no npm install needed!

<script type="module">
  import reactMultilingual from 'https://cdn.skypack.dev/react-multilingual';
</script>

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);

MIT licence