{"_id":"react-simple-di","_rev":"323023","name":"react-simple-di","description":"Simple Dependancy Injection Solution for React","dist-tags":{"latest":"1.2.0"},"maintainers":[{"name":"arunoda","email":"arunoda.susiripala@gmail.com"}],"time":{"modified":"2021-06-04T01:33:21.000Z","created":"2016-01-10T02:27:22.653Z","1.2.0":"2016-04-09T12:51:39.871Z","1.1.0":"2016-03-16T06:23:06.333Z","1.0.1":"2016-01-17T00:25:35.565Z","1.0.0":"2016-01-10T02:27:22.653Z"},"users":{},"repository":{"type":"git","url":"git+https://github.com/kadirahq/react-simple-di.git"},"versions":{"1.2.0":{"name":"react-simple-di","version":"1.2.0","description":"Simple Dependancy Injection Solution for React","repository":{"type":"git","url":"git+https://github.com/kadirahq/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"},"dependencies":{"babel-runtime":"6.x.x","hoist-non-react-statics":"1.x.x"},"gitHead":"db5000b041808909890d22024e54cc7a009aa0e8","bugs":{"url":"https://github.com/kadirahq/react-simple-di/issues"},"homepage":"https://github.com/kadirahq/react-simple-di#readme","_id":"react-simple-di@1.2.0","_shasum":"dde0e5bf689f391ef2ab02c9043b213fe239c6d0","_from":".","_npmVersion":"3.8.5","_nodeVersion":"4.4.0","_npmUser":{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},"dist":{"shasum":"dde0e5bf689f391ef2ab02c9043b213fe239c6d0","size":3928,"noattachment":false,"key":"/react-simple-di/-/react-simple-di-1.2.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-simple-di/download/react-simple-di-1.2.0.tgz"},"maintainers":[{"name":"arunoda","email":"arunoda.susiripala@gmail.com"}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-simple-di-1.2.0.tgz_1460206299438_0.3790955590084195"},"directories":{},"publish_time":1460206299871,"_cnpm_publish_time":1460206299871,"_hasShrinkwrap":false},"1.1.0":{"name":"react-simple-di","version":"1.1.0","description":"Simple Dependancy Injection Solution for React","repository":{"type":"git","url":"git+https://github.com/kadirahq/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":"0.14.x","react-dom":"0.14.x","react-addons-test-utils":">=0.14.3 <=0.15.0","enzyme":"1.x.x"},"peerDependencies":{"react":"0.14.x"},"dependencies":{"babel-runtime":"6.x.x","hoist-non-react-statics":"1.x.x"},"gitHead":"126dfa82dcb52b9d5af33acc9f7a373d2c15d21d","bugs":{"url":"https://github.com/kadirahq/react-simple-di/issues"},"homepage":"https://github.com/kadirahq/react-simple-di#readme","_id":"react-simple-di@1.1.0","_shasum":"0127d772378ba924acb8c7b0a728a305a6b8da0a","_from":".","_npmVersion":"3.7.5","_nodeVersion":"5.7.0","_npmUser":{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},"dist":{"shasum":"0127d772378ba924acb8c7b0a728a305a6b8da0a","size":3902,"noattachment":false,"key":"/react-simple-di/-/react-simple-di-1.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-simple-di/download/react-simple-di-1.1.0.tgz"},"maintainers":[{"name":"arunoda","email":"arunoda.susiripala@gmail.com"}],"_npmOperationalInternal":{"host":"packages-13-west.internal.npmjs.com","tmp":"tmp/react-simple-di-1.1.0.tgz_1458109383698_0.8578295859042555"},"directories":{},"publish_time":1458109386333,"_cnpm_publish_time":1458109386333,"_hasShrinkwrap":false},"1.0.1":{"name":"react-simple-di","version":"1.0.1","description":"Simple Dependancy Injection Solution for React","repository":{"type":"git","url":"git+https://github.com/kadirahq/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":"0.14.x","react-dom":"0.14.x","react-addons-test-utils":">=0.14.3 <=0.15.0","enzyme":"1.x.x"},"peerDependencies":{"react":"0.14.x"},"dependencies":{"babel-runtime":"6.x.x","hoist-non-react-statics":"1.x.x","react-display-name":"0.0.x"},"gitHead":"d016f6d92d8e971dcffc90c4143fd16ed89fa4cd","bugs":{"url":"https://github.com/kadirahq/react-simple-di/issues"},"homepage":"https://github.com/kadirahq/react-simple-di#readme","_id":"react-simple-di@1.0.1","_shasum":"234e29e0576205436439dc833775e5edec60d45b","_from":".","_npmVersion":"3.3.8","_nodeVersion":"4.2.1","_npmUser":{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},"dist":{"shasum":"234e29e0576205436439dc833775e5edec60d45b","size":3881,"noattachment":false,"key":"/react-simple-di/-/react-simple-di-1.0.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-simple-di/download/react-simple-di-1.0.1.tgz"},"maintainers":[{"name":"arunoda","email":"arunoda.susiripala@gmail.com"}],"directories":{},"publish_time":1452990335565,"_cnpm_publish_time":1452990335565,"_hasShrinkwrap":false},"1.0.0":{"name":"react-simple-di","version":"1.0.0","description":"Simple Dependancy Injection Solution for React","repository":{"type":"git","url":"git+https://github.com/kadirahq/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":"0.14.x","react-dom":"0.14.x","react-addons-test-utils":">=0.14.3 <=0.15.0","enzyme":"1.x.x"},"peerDependencies":{"react":"0.14.x"},"dependencies":{"babel-runtime":"6.x.x","hoist-non-react-statics":"1.x.x","react-display-name":"0.0.x"},"gitHead":"6bc11fe1df5d5170ab3648725475f3350dbf3ed5","bugs":{"url":"https://github.com/kadirahq/react-simple-di/issues"},"homepage":"https://github.com/kadirahq/react-simple-di#readme","_id":"react-simple-di@1.0.0","_shasum":"1754005c73de04f0b8976ba48eb0454b29e60e24","_from":".","_npmVersion":"3.3.8","_nodeVersion":"4.2.1","_npmUser":{"name":"arunoda","email":"arunoda.susiripala@gmail.com"},"dist":{"shasum":"1754005c73de04f0b8976ba48eb0454b29e60e24","size":3787,"noattachment":false,"key":"/react-simple-di/-/react-simple-di-1.0.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-simple-di/download/react-simple-di-1.0.0.tgz"},"maintainers":[{"name":"arunoda","email":"arunoda.susiripala@gmail.com"}],"directories":{},"publish_time":1452392842653,"_cnpm_publish_time":1452392842653,"_hasShrinkwrap":false}},"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\nconst {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/kadirahq/react-simple-di#readme","bugs":{"url":"https://github.com/kadirahq/react-simple-di/issues"},"license":"MIT"}