# mobx-react-i18n

> Internationalize React App by mobx

Latest version **1.1.0** (published 2020-04-25) · ISC license · 0 weekly downloads

## Install

```sh
npm install mobx-react-i18n
pnpm add mobx-react-i18n
yarn add mobx-react-i18n
bun add mobx-react-i18n
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.1.0 |
| Published | 2020-04-25 |
| First published | 2020-04-25 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 19.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Zhiqiu Yao |
| Maintainers | yaozhiqiu |

## Links

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

## Dependencies (3)

- [mobx](https://npm.io/package/mobx.md) ^5.15.4
- [react](https://npm.io/package/react.md) ^16.13.1
- [mobx-react](https://npm.io/package/mobx-react.md) ^6.2.2

## Recent versions

- 1.1.0 (latest) — 2020-04-25
- 1.0.0 — 2020-04-25

## README

English | [简体中文](./README.zh-CN.md)

# mobx-react-i18n
Internationalize React App by mobx

<img src="example/example.png" width="600" alt="Usage example" />

* * *

-   [Installation](#installation)
-   [Getting Started](#getting-started)
-   [API](#api)

## Installation

```sh
npm install --save mobx-react-i18n
```

## Getting Started

1. Create international files `zh-CN.json`, `en-US.json`:
```json
{
    "CHINESE": "中文",
    "ENGLISH": "英文",
    "greeting": "你好",
    "btn": {
        "confirm": "确认",
        "cancel": "取消"
    }
}
```

2. Inject your app as a global state by Provider
```js
import { Provider } from "mobx-react";
import {LanguageStore} from 'mobx-react-i18n';

const languageStore = new LanguageStore({
    currentLanguage: 'zh-CN',
    languageMap: {
        'zh-CN': require('./i18n/zh-CN.json'),
        'en-US': require('./i18n/en-US.json')
    }
});

ReactDOM.render((
    <Provider language={languageStore}>
        <App />
    </Provider>
), document.getElementById("app"));
```

3. Use `<Language />` to translate string literals:
```js
import { Language } from 'mobx-react-i18n';

const Greeting = () => (
    <p><Language resource="greeting"/></p>
)
```

## API
-   [Language](#Language)
-   [LanguageStore](#LanguageStore)

### Language
`<Language />` renders internationalized text.

#### Parameters
-   `props`
    -   `props.resource` The key of international files.

### LanguageStore
The class that generate global language store.
#### Parameters
-   `options`
    -   `options.currentLanguage` set default current language
    -   `options.languageMap` All international files
-   `property`
    -   `language.currentLanguage` current language in app
-   `method`
    -   `language.changeLanguageTo` switch language

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