# react-mobx-i18n

> Make React components translatable using MobX

Latest version **1.2.0** (published 2019-10-01) · MIT license · 0 weekly downloads

## Install

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

## 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.2.0 |
| Published | 2019-10-01 |
| First published | 2018-02-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 63.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | mixed |
| Maintainers | jover |
| Keywords | react, i18n, mobx |

## Links

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

## Dependencies (5)

- [mobx](https://npm.io/package/mobx.md) ^3.0.0 || ^4.0.0 || ^5.0.0
- [react](https://npm.io/package/react.md) ^15.3.0 || ^16.0.0
- [mobx-react](https://npm.io/package/mobx-react.md) ^4.0.0 || ^5.0.0 || ^6.0.0
- [prop-types](https://npm.io/package/prop-types.md) ^15.6.2 || ^16.0.0
- [i18n-harmony](https://npm.io/package/i18n-harmony.md) ^1.4.0

## Alternatives

- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads

## Recent versions

- 1.2.0 (latest) — 2019-10-01
- 1.1.0 — 2019-01-20
- 1.0.3 — 2018-09-18
- 1.0.2 — 2018-07-13
- 1.0.1 — 2018-03-01
- 1.0.0 — 2018-02-21

## README

# react-mobx-i18n

*Info: This is a fork from react-mobx-translatable due to other opinions about the approach.*

Make React components translatable using MobX. Can be used both on the server (SSR) and in the browser.

Note: This plugin depends on ``mobx-react`` features that are currently marked as experimental: ``Provider`` and ``inject``.

## Installation

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

## Usage

### Checklist (see the example for more details)

* Setup the i18n object in store
* Initialize the [i18n-harmony lib](https://github.com/DarkoKukovec/i18n-harmony) and translatable
* Wrap your components with ``Provider`` component
* Set the ``@translatable`` decorator on your components
* Call ``this.t(translationKey, options)`` from the component
* To change the language, change the locale variable in the store

### Methods

#### init(injectFn)

Method receives ``injectFn`` - function that maps the i18n object from the store
* The function receives the whole store object (from ``Provider``)
* The function should return an object that contains an ``i18n`` key with the i18n object from store (see the example)
* Default: ``(store) => {i18n: i18n.store}``
* If you have the i18n object in the root of the store (the default function can map the value), you don't need to call ``init``

#### translatable(Component|String[])

Method can receive either an array of strings or a React component.

* Array of strings - Used for connecting the store from ``Provider`` to the component. Translatable is returning a new function that accepts a React component.
* React component - The function will wrap the passed component

In both cases, the wrapped component will also be an observer. If using with other decorators, ``translatable`` should be the innermost one.

## Example

The example assumes you're using the following:
* [ES2015](https://babeljs.io/docs/plugins/preset-es2015/)
* [object rest spread](http://babeljs.io/docs/plugins/transform-object-rest-spread/)
* [decorators](https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy)

This is however not a requirement.

### Initialize store, i18n, and react-mobx-i18n

```JavaScript
import {observable} from 'mobx';
import i18n from 'i18n-harmony';
import {init} from 'react-mobx-i18n';

const defaultLocale = 'en'; // Can be based on browser language or user selection (localStorage, cookies)

const store = {
  i18n: observable({locale: defaultLocale})
};

// For details, see i18n-harmony: https://github.com/DarkoKukovec/i18n-harmony
i18n.init({
  translations: {
    en: {hello: 'Hello world!'}
  }
});

init((store) => ({i18n: store.i18n}));
```

### Wrap your React components inside of the ``Provider`` component and pass it the store

```JavaScript
import {Provider} from 'mobx-react';
import store from './store';

ReactDOM.render(<Provider {...store}>
  <Router {...renderProps} />
</Provider>, document.getElementById('app'));
```

### Translatable component

``` JavaScript
import {Component} from 'react';
import {translatable} from 'react-mobx-i18n';

@translatable
export default class MyComponent extends Component {
  render() {
    return <div>{this.t('hello')}</div>
  }
}
```

### `has` method

``` JavaScript
import {Component} from 'react';
import {translatable} from 'translatable';

@translatable
export default class MyComponent extends Component {
  render() {
    return <div>{this.has('hello') && this.t('hello')}</div>
  }
}
```

## License
[MIT License](LICENSE)

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