{"_id":"@storybook/react-simple-di","_rev":"46-d56646e2a65e54733977361bcdc46f8a","name":"@storybook/react-simple-di","dist-tags":{"latest":"1.3.0"},"versions":{"1.2.1":{"name":"@storybook/react-simple-di","version":"1.2.1","license":"MIT","_id":"@storybook/react-simple-di@1.2.1","maintainers":[{"name":"danielduan","email":"dduan@yahoo.com"}],"homepage":"https://github.com/storybooks/react-simple-di#readme","bugs":{"url":"https://github.com/storybooks/react-simple-di/issues"},"dist":{"shasum":"fe4b29a32459e168da3aae8e6fcd8631861210c9","tarball":"https://registry.npmjs.org/@storybook/react-simple-di/-/react-simple-di-1.2.1.tgz","integrity":"sha512-Sj3JU1KpnTIyBWBp+uAZT3PlZ2IVYrxvOOXgpT92Injcmg2KV2ry1GkZen6XuVZqUfU0vz/sK08aP45boErFnw==","signatures":[{"sig":"MEUCIQDOdIHdhMTEavBKxoIIKEAyV7QNU6f+Np6Ts1H2SNkD9QIgAdaOV5KjMQPdPJl7cexvvNW5bbp4pjnqEUiHPQW/jAg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}]},"gitHead":"642a6b196cabed036fec874de75bb5e9e1866f3f","options":{"mocha":"--require scripts/mocha_runner lib/**/__tests__/**/*.js"},"scripts":{"lint":"eslint ./lib","test":"npm run lint && npm run testonly","lintfix":"eslint ./lib --fix","testonly":"mocha $npm_package_options_mocha","prepublish":". ./scripts/prepublish.sh"},"_npmUser":{"name":"danielduan","email":"dduan@yahoo.com"},"repository":{"url":"git+https://github.com/storybooks/react-simple-di.git","type":"git"},"_npmVersion":"5.5.1","description":"Simple Dependancy Injection Solution for React","directories":{},"_nodeVersion":"8.9.1","dependencies":{"babel-runtime":"6.x.x","hoist-non-react-statics":"1.x.x"},"devDependencies":{"chai":"3.x.x","mocha":"2.x.x","react":"^15.0.0","enzyme":"^2.2.0","eslint":"1.7.x","nodemon":"1.7.x","babel-cli":"6.x.x","react-dom":"^15.0.0","babel-core":"6.x.x","babel-eslint":"4.x.x","babel-polyfill":"6.x.x","babel-preset-react":"6.x.x","babel-preset-es2015":"6.x.x","eslint-plugin-babel":"2.x.x","eslint-plugin-react":"3.x.x","babel-preset-stage-2":"6.x.x","react-addons-test-utils":"^15.0.0","babel-plugin-transform-runtime":"6.x.x"},"peerDependencies":{"react":"^0.14.0 || ^15.0.0 || ^16.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-simple-di-1.2.1.tgz_1510764637907_0.12119770352728665","host":"s3://npm-registry-packages"}},"1.3.0":{"name":"@storybook/react-simple-di","version":"1.3.0","license":"MIT","_id":"@storybook/react-simple-di@1.3.0","maintainers":[{"name":"tvs","email":"teije-vs@hotmail.com"},{"name":"danielduan","email":"dduan@yahoo.com"},{"name":"hypnosphi","email":"talpa@yandex.ru"},{"name":"alexandrebodin","email":"bodin.alex@gmail.com"},{"name":"shilman","email":"michael@lab80.co"},{"name":"aaronmcadam","email":"aaron@aaronmcadam.com"},{"name":"mnmtanish","email":"mnmtanish@gmail.com"},{"name":"usulpro","email":"regx@usul.su"},{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},{"name":"mthuret","email":"mlthutrix@gmail.com"},{"name":"ndelangen","email":"ndelangen@me.com"}],"homepage":"https://github.com/storybooks/react-simple-di#readme","bugs":{"url":"https://github.com/storybooks/react-simple-di/issues"},"dist":{"shasum":"13116d89a2f42898716a7f8c4095b47415526371","tarball":"https://registry.npmjs.org/@storybook/react-simple-di/-/react-simple-di-1.3.0.tgz","integrity":"sha512-RH6gPQaYMs/VzQX2dgbZU8DQMKFXVOv1ruohHjjNPys4q+YdqMFMDe5jOP1AUE3j9g01x0eW7bVjRawSpl++Ew==","signatures":[{"sig":"MEQCIB1eF5pYWImIqe1y8Z7j6dl5n/2SR1j1ijdSGbeSvGRtAiAifbwbCL4OkCtknSK82a3Wojs6hd6A4jrx361mbq7lNQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2cbSCRA9TVsSAnZWagAAWVcP/0TgTo7XnNHP7JezL488\nuGNwopbHFicsIpCaYqTWDH4aPVHuqdvnAPT+JJ9xWwXbeLu1ZRDpP3o8Tzw7\nqh+Ks+jw58qWrTrfIFkdfnMDbUl2tKQZ7przjEbR61FaLhJjjD7c7aSCX4yc\n513bk09RqXdQG0wuFe1hzBHUdzMXJ+EXAIF/GDKz5T+q6PU+MlQe/vyw8Swk\nhedNiheeFs2p/my4NulPP6XIeoO9ziPTzFsta1KRhK7cK08ixW0b7RGlayjk\n37ztCAJOb3HcmAj20aqBthRAA2ug6YU2kYxuUjduZEznXRLAyjZBuKkMFEsJ\n7+0CnY7OHXcC1Vp6aroQUJ+LQMAiEntlGJVxheOVBvvDn9dJqEkP5qxPueV8\nK5EKRNMww7CcYQAwWKDASoDNP1awV3tDOEBNCMvOIoHcVmedQUvcydt8ZWoL\nMKWBr4v9rHKuxAvLkxp7U/NTWZ4l5Bv0Ke9NTcV/vMHwLEDwq79k6puvSWau\ngf7vp++E1Yj2HcMY6n7y8dODFZsRFzt1m/MPGXHJ7/cFLr8hj4reDfOl22xV\ntrM0PmV2GvFFlaatfxQNgp/a2p3QihFvVrzcGFhLXaFk1p2unLg3b4slPwlK\nNUCzdKpwwxv1DicMtl8fOUVM1UW5YgzTJt+D2v+1x/yej0e21TWKA5S+4CU4\nZgtY\r\n=qFRG\r\n-----END PGP SIGNATURE-----\r\n"},"gitHead":"94a5f01af8130aeb47952796a33f3fdc22c17f78","options":{"mocha":"--require scripts/mocha_runner lib/**/__tests__/**/*.js"},"scripts":{"lint":"eslint ./lib","test":"npm run lint && npm run testonly","lintfix":"eslint ./lib --fix","testonly":"mocha $npm_package_options_mocha","prepublish":". ./scripts/prepublish.sh"},"_npmUser":{"name":"danielduan","email":"dduan@yahoo.com"},"repository":{"url":"git+https://github.com/storybooks/react-simple-di.git","type":"git"},"_npmVersion":"5.5.1","description":"Simple Dependancy Injection Solution for React","directories":{},"_nodeVersion":"8.9.1","dependencies":{"prop-types":"^15.6.0","babel-runtime":"6.x.x","create-react-class":"^15.6.2","hoist-non-react-statics":"1.x.x"},"devDependencies":{"chai":"3.x.x","mocha":"2.x.x","react":"^15.0.0","enzyme":"^2.2.0","eslint":"1.7.x","nodemon":"1.7.x","babel-cli":"6.x.x","react-dom":"^15.0.0","babel-core":"6.x.x","babel-eslint":"4.x.x","babel-polyfill":"6.x.x","babel-preset-react":"6.x.x","babel-preset-es2015":"6.x.x","eslint-plugin-babel":"2.x.x","eslint-plugin-react":"3.x.x","babel-preset-stage-2":"6.x.x","react-addons-test-utils":"^15.0.0","babel-plugin-transform-runtime":"6.x.x"},"peerDependencies":{"react":"^0.14.0 || ^15.0.0 || ^16.0.0"},"_npmOperationalInternal":{"tmp":"tmp/react-simple-di-1.3.0.tgz_1512430051691_0.8673354564234614","host":"s3://npm-registry-packages"}}},"time":{"created":"2017-11-15T16:50:38.809Z","modified":"2026-10-27T15:16:24.393Z","1.2.1":"2017-11-15T16:50:38.809Z","1.3.0":"2017-12-04T23:27:32.625Z"},"bugs":{"url":"https://github.com/storybooks/react-simple-di/issues"},"license":"MIT","homepage":"https://github.com/storybooks/react-simple-di#readme","repository":{"url":"git+https://github.com/storybooks/react-simple-di.git","type":"git"},"description":"Simple Dependancy Injection Solution for React","maintainers":[{"email":"ndelangen@me.com","name":"ndelangen"},{"email":"shilman@gmail.com","name":"shilman"},{"email":"tom@thesnail.org","name":"tmeasday"},{"email":"varunvachhar@gmail.com","name":"winkervsbecks"},{"email":"kyle.gach@gmail.com","name":"kylegach"},{"email":"jeppe@reinhold.is","name":"jreinhold"},{"email":"kasperpeulen@gmail.com","name":"kasperpeulen"},{"email":"dev@valentinpalkovic.dev","name":"valentinpalkovic"},{"email":"dom@hichroma.com","name":"domyen"},{"email":"storybookbot@gmail.com","name":"storybook-bot"},{"email":"vanessa.yh.yuen@gmail.com","name":"vanessayuenn"}],"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","readmeFilename":"README.md"}