{"_id":"@storybook/react-simple-di","_rev":"323027","name":"@storybook/react-simple-di","description":"Simple Dependancy Injection Solution for React","dist-tags":{"latest":"1.3.0"},"maintainers":[{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"dylanpiercey","email":"pierceydylan@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"hypnosphi","email":""},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"monkeyworks","email":"igor.szyporyn@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":""},{"name":"pago","email":"patrick@pagosoft.com"},{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":""},{"name":"usulpro","email":"regx@usul.su"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"yannbf","email":"yannbf@gmail.com"}],"time":{"modified":"2021-06-04T01:33:46.000Z","created":"2017-11-15T16:50:38.809Z","1.3.0":"2017-12-04T23:27:32.625Z","1.2.1":"2017-11-15T16:50:38.809Z"},"users":{},"repository":{"type":"git","url":"git+https://github.com/storybooks/react-simple-di.git"},"versions":{"1.3.0":{"name":"@storybook/react-simple-di","version":"1.3.0","description":"Simple Dependancy Injection Solution for React","repository":{"type":"git","url":"git+https://github.com/storybooks/react-simple-di.git"},"license":"MIT","options":{"mocha":"--require scripts/mocha_runner lib/**/__tests__/**/*.js"},"scripts":{"prepublish":". ./scripts/prepublish.sh","lint":"eslint ./lib","lintfix":"eslint ./lib --fix","testonly":"mocha $npm_package_options_mocha","test":"npm run lint && npm run testonly"},"devDependencies":{"nodemon":"1.7.x","mocha":"2.x.x","chai":"3.x.x","eslint":"1.7.x","eslint-plugin-react":"3.x.x","babel-eslint":"4.x.x","eslint-plugin-babel":"2.x.x","babel-cli":"6.x.x","babel-core":"6.x.x","babel-polyfill":"6.x.x","babel-preset-es2015":"6.x.x","babel-preset-stage-2":"6.x.x","babel-preset-react":"6.x.x","babel-plugin-transform-runtime":"6.x.x","react":"^15.0.0","react-dom":"^15.0.0","react-addons-test-utils":"^15.0.0","enzyme":"^2.2.0"},"peerDependencies":{"react":"^0.14.0 || ^15.0.0 || ^16.0.0"},"dependencies":{"babel-runtime":"6.x.x","create-react-class":"^15.6.2","hoist-non-react-statics":"1.x.x","prop-types":"^15.6.0"},"gitHead":"94a5f01af8130aeb47952796a33f3fdc22c17f78","bugs":{"url":"https://github.com/storybooks/react-simple-di/issues"},"homepage":"https://github.com/storybooks/react-simple-di#readme","_id":"@storybook/react-simple-di@1.3.0","_npmVersion":"5.5.1","_nodeVersion":"8.9.1","_npmUser":{"name":"danielduan","email":"dduan@yahoo.com"},"dist":{"shasum":"13116d89a2f42898716a7f8c4095b47415526371","size":3919,"noattachment":false,"key":"/@storybook/react-simple-di/-/@storybook/react-simple-di-1.3.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/@storybook/react-simple-di/download/@storybook/react-simple-di-1.3.0.tgz"},"maintainers":[{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"dylanpiercey","email":"pierceydylan@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"hypnosphi","email":""},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"monkeyworks","email":"igor.szyporyn@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":""},{"name":"pago","email":"patrick@pagosoft.com"},{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":""},{"name":"usulpro","email":"regx@usul.su"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"yannbf","email":"yannbf@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-simple-di-1.3.0.tgz_1512430051691_0.8673354564234614"},"directories":{},"publish_time":1512430052625,"_hasShrinkwrap":false,"_cnpm_publish_time":1512430052625},"1.2.1":{"name":"@storybook/react-simple-di","version":"1.2.1","description":"Simple Dependancy Injection Solution for React","repository":{"type":"git","url":"git+https://github.com/storybooks/react-simple-di.git"},"license":"MIT","options":{"mocha":"--require scripts/mocha_runner lib/**/__tests__/**/*.js"},"scripts":{"prepublish":". ./scripts/prepublish.sh","lint":"eslint ./lib","lintfix":"eslint ./lib --fix","testonly":"mocha $npm_package_options_mocha","test":"npm run lint && npm run testonly"},"devDependencies":{"nodemon":"1.7.x","mocha":"2.x.x","chai":"3.x.x","eslint":"1.7.x","eslint-plugin-react":"3.x.x","babel-eslint":"4.x.x","eslint-plugin-babel":"2.x.x","babel-cli":"6.x.x","babel-core":"6.x.x","babel-polyfill":"6.x.x","babel-preset-es2015":"6.x.x","babel-preset-stage-2":"6.x.x","babel-preset-react":"6.x.x","babel-plugin-transform-runtime":"6.x.x","react":"^15.0.0","react-dom":"^15.0.0","react-addons-test-utils":"^15.0.0","enzyme":"^2.2.0"},"peerDependencies":{"react":"^0.14.0 || ^15.0.0 || ^16.0.0"},"dependencies":{"babel-runtime":"6.x.x","hoist-non-react-statics":"1.x.x"},"gitHead":"642a6b196cabed036fec874de75bb5e9e1866f3f","bugs":{"url":"https://github.com/storybooks/react-simple-di/issues"},"homepage":"https://github.com/storybooks/react-simple-di#readme","_id":"@storybook/react-simple-di@1.2.1","_npmVersion":"5.5.1","_nodeVersion":"8.9.1","_npmUser":{"name":"danielduan","email":"dduan@yahoo.com"},"dist":{"shasum":"fe4b29a32459e168da3aae8e6fcd8631861210c9","size":3828,"noattachment":false,"key":"/@storybook/react-simple-di/-/@storybook/react-simple-di-1.2.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/@storybook/react-simple-di/download/@storybook/react-simple-di-1.2.1.tgz"},"maintainers":[{"name":"amalik2","email":"ahnmalik2@gmail.com"},{"name":"dylanpiercey","email":"pierceydylan@gmail.com"},{"name":"ghengeveld","email":"info@ghengeveld.nl"},{"name":"gongreg","email":"gytis.vinclovas@gmail.com"},{"name":"hypnosphi","email":""},{"name":"igor-dv","email":"davydkin.igor@gmail.com"},{"name":"kylesuss","email":"susskyle@gmail.com"},{"name":"monkeyworks","email":"igor.szyporyn@gmail.com"},{"name":"mrmckeb","email":"mrmckeb.npm@outlook.com"},{"name":"ndelangen","email":""},{"name":"pago","email":"patrick@pagosoft.com"},{"name":"phated","email":"blaine.bublitz@gmail.com"},{"name":"pksunkara","email":"pavan.sss1991@gmail.com"},{"name":"tmeasday","email":""},{"name":"usulpro","email":"regx@usul.su"},{"name":"winkervsbecks","email":"varunvachhar@gmail.com"},{"name":"yannbf","email":"yannbf@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-simple-di-1.2.1.tgz_1510764637907_0.12119770352728665"},"directories":{},"publish_time":1510764638809,"_hasShrinkwrap":false,"_cnpm_publish_time":1510764638809}},"readme":"# react-simple-di\n\nSimple dependancy injection solution for React.\n\n### Installation\n\n```\nnpm i react-simple-di\n```\n\n### Intro\n\nIn `react-simple-di`, we've two types of dependencies, they are:\n\n1. context - These are usually, configurations, models and client for different remote data solutions.\n2. actions - Actions are simple functions which used to perform business logic with the help of the above context.\n\n> Every action will receive the `context` as it's first argument.\n\n### Injecting Dependancies\n\nFirst, we need to inject dependencies to a root level React component. Mostly, this will be the main layout component of our app.\n\nHere are our dependencies:\n```js\nconst context = {\n    DB,\n    Router,\n    appName: 'My Blog'\n};\n\nconst actions = {\n    posts: {\n        create({DB, Router}, title, content) {\n            const id = String(Math.random());\n            DB.createPost(id, title, content);\n            Router.go(`/post/${id}`);\n        }\n    }\n};\n```\n\nFirst we've defined our context. Then, we have our actions. Here actions must follow a structure like mentioned above.\n\nLet's inject our dependencies:\n\n```js\nimport {injectDeps} from 'react-simple-di';\nimport Layout from './layout.jsx';\n\n// Above mentioned actions and context are defined here.\n\nconst LayoutWithDeps = injectDeps(context, actions)(Layout);\n```\n\nNow you can use `LayoutWithDeps` anywhere in your app.\n\n## Using Depedencies\n\nAny component rendered inside `LayoutWithDeps` can access both context and actions. \n\nWhen using dependecies it will compose a new React component and pass dependencies via props to the original component.\n\nFirst let's create our UI component. Here it will expect dependecies to come via props `appName` and `createPost`.\n\n```js\nclass CreatePost extends React.Component {\n    render() {\n        const {appName} = this.props;\n        return (\n            <div>\n                Create a blog post on app: ${appName}. <br/>\n                <button onClick={this.create.bind(this)}>Create Now</button>\n            </div>\n        );\n    }\n\n    create() {\n        const {createPost} = this.props;\n        createPost('My Blog Title', 'Some Content');\n    }\n}\n```\n\nSo, let's use dependencies:\n\n```js\nimport {useDeps} from 'react-simple-di';\n\n// Assume above mentioned CreatePost react component is\n// defined here.\n\nconst depsToPropsMapper = (context, actions) => ({\n    appName: context.appName,\n    createPost: actions.posts.create\n});\n\nconst CreatePostWithDeps = useDeps(depsToPropsMapper)(CreatePost);\n```\n\nThat's it. \n\n> Note: Here when calling the `actions.posts.create` action, you don't need to provide the context as the first argument. It'll handle by `react-simple-di`.\n\n**Default Mapper**\n\nIf you didn't provide a mapper function, useDeps will use a default mapper function will allows you to get context and props directy. Here's that default mapper:\n\n```js\nconst mapper = (context, actions) => ({\n    context: () => context,\n    actions: () => actions\n});\n```\n","_attachments":{},"homepage":"https://github.com/storybooks/react-simple-di#readme","bugs":{"url":"https://github.com/storybooks/react-simple-di/issues"},"license":"MIT"}