Nondigestible Purple Mayonnaise

    This package has been deprecated

    Author message:

    Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

    react-mobx-translatable

    1.2.0 • Public • Published

    react-mobx-translatable

    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.

    Build Status Dependency Status devDependency Status

    Installation

    npm install react-mobx-translatable

    Usage

    Checklist (see the example for more details)

    • Setup the i18n object in store
    • Initialize the i18n-harmony lib 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:

    This is however not a requirement.

    Initialize store, i18n, and translatable

    import {observable} from 'mobx';
    import i18n from 'i18n-harmony';
    import {init} from 'translatable';
     
    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 componentand pass it the store

    import {Provider} from 'mobx-react';
    import store from './store';
     
    ReactDOM.render(<Provider {...store}>
      <Router {...renderProps} />
    </Provider>, document.getElementById('app'));

    Translatable component

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

    has method

    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>
      }
    }

    Changelog

    v1.2.0

    v1.1.0

    • Add ability to connect the store with the component

    v1.0.0

    • Initial release

    License

    MIT License

    Install

    npm i react-mobx-translatable

    DownloadsWeekly Downloads

    1

    Version

    1.2.0

    License

    MIT

    Last publish

    Collaborators

    • buhin
    • fvoska
    • ivicabatinic
    • dkriskov
    • kbambir
    • darkokukovec
    • andreicek
    • infinumco