# react-multilingual

> multilingual feature on strings | text and css style

Latest version **1.5.0** (published 2017-06-13) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-multilingual
pnpm add react-multilingual
yarn add react-multilingual
bun add react-multilingual
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.5.0 |
| Published | 2017-06-13 |
| First published | 2016-10-18 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 8 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Hassan Gilak |
| Maintainers | hasangilak |

## Links

- npm: https://www.npmjs.com/package/react-multilingual
- Repository: https://github.com/hasangilak/react-multilingual
- Homepage: https://github.com/hasangilak/react-multilingual#readme
- Issues: https://github.com/hasangilak/react-multilingual/issues
- npm.io page: https://npm.io/package/react-multilingual

## Dependencies (8)

- [react](https://npm.io/package/react.md) 15.3.0
- [redux](https://npm.io/package/redux.md) ^3.6.0
- [lodash](https://npm.io/package/lodash.md) ^4.16.4
- [invariant](https://npm.io/package/invariant.md) ^2.2.1
- [react-dom](https://npm.io/package/react-dom.md) 15.3.0
- [react-redux](https://npm.io/package/react-redux.md) ^4.4.5
- [redux-logger](https://npm.io/package/redux-logger.md) ^2.7.0
- [hoist-non-react-statics](https://npm.io/package/hoist-non-react-statics.md) ^1.2.0

## Recent versions

- 1.5.0 (latest) — 2017-06-13
- 1.1.5 — 2016-11-01
- 1.1.4 — 2016-11-01
- 1.1.3 — 2016-11-01
- 1.1.2 — 2016-10-19
- 1.1.0 — 2016-10-19
- 1.0.9 — 2016-10-19
- 1.0.8 — 2016-10-19
- 1.0.7 — 2016-10-19
- 1.0.6 — 2016-10-19
- 1.0.5 — 2016-10-19
- 1.0.4 — 2016-10-19
- 1.0.3 — 2016-10-19
- 1.0.2 — 2016-10-18
- 1.0.1 — 2016-10-18
- … 1 more at https://npm.io/package/react-multilingual/versions

## 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
```s
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
```js
npm install && npm run example
```

###locale.js
```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.
```js
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
```js
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:
```js
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

---
_Source: https://npm.io/package/react-multilingual · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._