{"_id":"react-mobx-translatable","_rev":"36-976e0e1bd59eeb655d30ed7e7ca04f74","name":"react-mobx-translatable","dist-tags":{"latest":"1.2.0"},"versions":{"1.0.0":{"name":"react-mobx-translatable","version":"1.0.0","keywords":["react","i18n","mobx"],"author":{"name":"Infinum","email":"javascript.team@infinum.co"},"license":"MIT","_id":"react-mobx-translatable@1.0.0","maintainers":[{"name":"darkokukovec","email":"darko@kukovec.eu"}],"contributors":[{"name":"Darko Kukovec","email":"darko@infinum.co"}],"homepage":"https://github.com/infinum/react-mobx-translatable#readme","bugs":{"url":"https://github.com/infinum/react-mobx-translatable/issues"},"dist":{"shasum":"1ce0463d79624be31e2647284c84312938eb1e54","tarball":"https://registry.npmjs.org/react-mobx-translatable/-/react-mobx-translatable-1.0.0.tgz","integrity":"sha512-DswJXOBaV4/WGhqfNXefr+ppoIjfdfUihXYOyw3v0xjJs0gEfSIeTfg9TUdYhiB8+YWyBnZG/WIs8L1zJaU9wg==","signatures":[{"sig":"MEYCIQDLPM55UfSgE2J85PtYsJoGOSWSDg//kKphtlcj4b93FAIhAJf3l3dlo1E0mXsy65iO8Pw+3H9h5XWL7Lr5YrW3WnrI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"1ce0463d79624be31e2647284c84312938eb1e54","gitHead":"f52e8d968d574714d872d07004d4cbccbe73292f","scripts":{"test":"mocha test --compilers js:babel-register","precommit":"npm test"},"_npmUser":{"name":"darkokukovec","email":"darko@kukovec.eu"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/infinum/react-mobx-translatable.git","type":"git"},"_npmVersion":"3.10.3","description":"Make React components translatable using MobX","directories":{},"_nodeVersion":"6.3.1","dependencies":{"react":"^15.3.0","mobx-react":"^3.5.3","i18n-harmony":"^1.4.0"},"devDependencies":{"chai":"^3.5.0","mobx":"^2.4.1","husky":"^0.11.6","jsdom":"^9.4.1","mocha":"^3.0.1","enzyme":"^2.4.1","react-dom":"^15.3.0","babel-register":"^6.11.6","babel-preset-react":"^6.11.1","react-addons-test-utils":"^15.3.0"},"_npmOperationalInternal":{"tmp":"tmp/react-mobx-translatable-1.0.0.tgz_1470427107165_0.4363238965161145","host":"packages-12-west.internal.npmjs.com"}},"1.1.0":{"name":"react-mobx-translatable","version":"1.1.0","keywords":["react","i18n","mobx"],"author":{"name":"Infinum","email":"javascript.team@infinum.co"},"license":"MIT","_id":"react-mobx-translatable@1.1.0","maintainers":[{"name":"darkokukovec","email":"darko@kukovec.eu"}],"contributors":[{"name":"Darko Kukovec","email":"darko@infinum.co"}],"homepage":"https://github.com/infinum/react-mobx-translatable#readme","bugs":{"url":"https://github.com/infinum/react-mobx-translatable/issues"},"dist":{"shasum":"8bfd1b500d2e4b4e3c1d449c4be96d3e7b6d9a45","tarball":"https://registry.npmjs.org/react-mobx-translatable/-/react-mobx-translatable-1.1.0.tgz","integrity":"sha512-NKAD6jnxaVq7xRH9zU36RX4T3N3jOYBcXEYGrZ8E4YqGxDRTsD1zYdsahFWUt/l65FvLJ+EcUh7qMVTeXf0EmQ==","signatures":[{"sig":"MEUCIA8Hc+PCvsg9Ontksye/vOU1Gz3EzUEB2V8CB7fKFGHmAiEA4q8lj68+akqDGwtlLWerStkt+MOZgvTosiKvHOcyQjs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"8bfd1b500d2e4b4e3c1d449c4be96d3e7b6d9a45","gitHead":"a54b604edbe2ba2c7cd9d12606066e73252001e7","scripts":{"test":"mocha test --compilers js:babel-register","precommit":"npm test"},"_npmUser":{"name":"darkokukovec","email":"darko@kukovec.eu"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/infinum/react-mobx-translatable.git","type":"git"},"_npmVersion":"3.10.3","description":"Make React components translatable using MobX","directories":{},"_nodeVersion":"6.3.1","dependencies":{"react":"^15.3.0","mobx-react":"^3.5.3","i18n-harmony":"^1.4.0"},"devDependencies":{"chai":"^3.5.0","mobx":"^2.4.1","husky":"^0.11.6","jsdom":"^9.4.1","mocha":"^3.0.1","enzyme":"^2.4.1","react-dom":"^15.3.0","babel-register":"^6.11.6","babel-preset-react":"^6.11.1","react-addons-test-utils":"^15.3.0"},"_npmOperationalInternal":{"tmp":"tmp/react-mobx-translatable-1.1.0.tgz_1470428665982_0.8180623797234148","host":"packages-16-east.internal.npmjs.com"}},"1.2.0":{"name":"react-mobx-translatable","version":"1.2.0","keywords":["react","i18n","mobx"],"author":{"name":"Infinum","email":"javascript.team@infinum.co"},"license":"MIT","_id":"react-mobx-translatable@1.2.0","maintainers":[{"name":"darkokukovec","email":"darko@kukovec.eu"}],"contributors":[{"name":"Darko Kukovec","email":"darko@infinum.co"}],"homepage":"https://github.com/infinum/react-mobx-translatable#readme","bugs":{"url":"https://github.com/infinum/react-mobx-translatable/issues"},"dist":{"shasum":"ae9c382addd0bd691c6b119fa665f6f857b56d12","tarball":"https://registry.npmjs.org/react-mobx-translatable/-/react-mobx-translatable-1.2.0.tgz","integrity":"sha512-XpGipvwlXnV11fM2WxxiyLlnUSfVrqPR/9UIxEiOjQeK551pHIDeKVxS/Wx+b4nVALqITsFMxvYX7EZiP7nC+Q==","signatures":[{"sig":"MEUCIGBYFV0lGNNzAq3J0NMxUhPJAj0IEfEimffjx3YWjUSTAiEAxBLSXxTbbLnb5Thw3ud0xOx8MMkTuC16nsQnNR5+da4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"main":"index.js","_from":".","_shasum":"ae9c382addd0bd691c6b119fa665f6f857b56d12","gitHead":"87daef1effca2e4a79813c91ba5428741ec6cacd","scripts":{"test":"mocha test --compilers js:babel-register","precommit":"npm test"},"_npmUser":{"name":"darkokukovec","email":"darko@kukovec.eu"},"deprecated":"Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.","repository":{"url":"git+https://github.com/infinum/react-mobx-translatable.git","type":"git"},"_npmVersion":"3.10.3","description":"Make React components translatable using MobX","directories":{},"_nodeVersion":"6.5.0","dependencies":{"react":"^15.3.0","mobx-react":"^3.5.3","i18n-harmony":"^1.4.0"},"devDependencies":{"chai":"^3.5.0","mobx":"^2.4.1","husky":"^0.11.6","jsdom":"^9.4.1","mocha":"^3.0.1","enzyme":"^2.4.1","react-dom":"^15.3.0","babel-register":"^6.11.6","babel-preset-react":"^6.11.1","react-addons-test-utils":"^15.3.0"},"_npmOperationalInternal":{"tmp":"tmp/react-mobx-translatable-1.2.0.tgz_1473753742001_0.4654611551668495","host":"packages-16-east.internal.npmjs.com"}}},"time":{"created":"2016-08-05T19:58:28.917Z","modified":"2025-09-17T07:26:05.677Z","1.0.0":"2016-08-05T19:58:28.917Z","1.1.0":"2016-08-05T20:24:27.868Z","1.2.0":"2016-09-13T08:02:23.941Z"},"bugs":{"url":"https://github.com/infinum/react-mobx-translatable/issues"},"author":{"name":"Infinum","email":"javascript.team@infinum.co"},"license":"MIT","homepage":"https://github.com/infinum/react-mobx-translatable#readme","keywords":["react","i18n","mobx"],"repository":{"url":"git+https://github.com/infinum/react-mobx-translatable.git","type":"git"},"description":"Make React components translatable using MobX","contributors":[{"name":"Darko Kukovec","email":"darko@infinum.co"}],"maintainers":[{"email":"accounts.npm@infinum.com","name":"infinumcom"},{"email":"npm@kuk.is","name":"darkokukovec"},{"email":"filip.voska@gmail.com","name":"fvoska"},{"email":"mihael.safaric+npm@gmail.com","name":"safo6m"},{"email":"dani.pavic@infinum.com","name":"danipavic"},{"email":"crnkovic.a.z@gmail.com","name":"andreicek"},{"email":"ACcounts.npm@infinum.com","name":"infinumco"}],"readme":"# react-mobx-translatable\n\nMake React components translatable using MobX. Can be used both on the server (SSR) and in the browser.\n\nNote: This plugin depends on ``mobx-react`` features that are currently marked as experimental: ``Provider`` and ``inject``.\n\n[![Build Status](https://travis-ci.org/infinum/react-mobx-translatable.svg?branch=master)](https://travis-ci.org/infinum/react-mobx-translatable)\n[![Dependency Status](https://david-dm.org/infinum/react-mobx-translatable.svg)](https://david-dm.org/infinum/react-mobx-translatable)\n[![devDependency Status](https://david-dm.org/infinum/react-mobx-translatable/dev-status.svg)](https://david-dm.org/infinum/react-mobx-translatable#info=devDependencies)\n\n## Installation\n\n```Bash\nnpm install react-mobx-translatable\n```\n\n## Usage\n\n### Checklist (see the example for more details)\n\n* Setup the i18n object in store\n* Initialize the [i18n-harmony lib](https://github.com/DarkoKukovec/i18n-harmony) and translatable\n* Wrap your components with ``Provider`` component\n* Set the ``@translatable`` decorator on your components\n* Call ``this.t(translationKey, options)`` from the component\n* To change the language, change the locale variable in the store\n\n### Methods\n\n#### init(injectFn)\n\nMethod receives ``injectFn`` - function that maps the i18n object from the store\n* The function receives the whole store object (from ``Provider``)\n* The function should return an object that contains an ``i18n`` key with the i18n object from store (see the example)\n* Default: ``(store) => {i18n: i18n.store}``\n* 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``\n\n#### translatable(Component|String[])\n\nMethod can receive either an array of strings or a React component.\n\n* Array of strings - Used for connecting the store from ``Provider`` to the component. Translatable is returning a new function that accepts a React component.\n* React component - The function will wrap the passed component\n\nIn both cases, the wrapped component will also be an observer. If using with other decorators, ``translatable`` should be the innermost one.\n\n## Example\n\nThe example assumes you're using the following:\n* [ES2015](https://babeljs.io/docs/plugins/preset-es2015/)\n* [object rest spread](http://babeljs.io/docs/plugins/transform-object-rest-spread/)\n* [decorators](https://github.com/loganfsmyth/babel-plugin-transform-decorators-legacy)\n\nThis is however not a requirement.\n\n### Initialize store, i18n, and translatable\n\n```JavaScript\nimport {observable} from 'mobx';\nimport i18n from 'i18n-harmony';\nimport {init} from 'translatable';\n\nconst defaultLocale = 'en'; // Can be based on browser language or user selection (localStorage, cookies)\n\nconst store = {\n i18n: observable({locale: defaultLocale})\n};\n\n// For details, see i18n-harmony: https://github.com/DarkoKukovec/i18n-harmony\ni18n.init({\n translations: {\n en: {hello: 'Hello world!'}\n }\n});\n\ninit((store) => ({i18n: store.i18n}));\n```\n\n### Wrap your React components inside of the ``Provider`` componentand pass it the store\n\n```JavaScript\nimport {Provider} from 'mobx-react';\nimport store from './store';\n\nReactDOM.render(\n \n, document.getElementById('app'));\n```\n\n### Translatable component\n\n``` JavaScript\nimport {Component} from 'react';\nimport {translatable} from 'translatable';\n\n@translatable\nexport default class MyComponent extends Component {\n render() {\n return
{this.t('hello')}
\n }\n}\n```\n\n### `has` method\n\n``` JavaScript\nimport {Component} from 'react';\nimport {translatable} from 'translatable';\n\n@translatable\nexport default class MyComponent extends Component {\n render() {\n return
{this.has('hello') && this.t('hello')}
\n }\n}\n```\n\n## Changelog\n\n### v1.2.0\n\n* Expose `has` from [i18n-harmony lib](https://github.com/DarkoKukovec/i18n-harmony)\n\n### v1.1.0\n\n* Add ability to connect the store with the component\n\n### v1.0.0\n\n* Initial release\n\n## License\n[MIT License](LICENSE)\n","readmeFilename":"README.md"}