{"_id":"@aquigorka/compose","_rev":"1-9aa95f1f03438b6c26074dd7935ef3e6","name":"@aquigorka/compose","dist-tags":{"latest":"1.0.0"},"versions":{"1.0.0":{"name":"@aquigorka/compose","version":"1.0.0","description":"React component composition helper","main":"lib/index.js","module":"es/index.js","files":["css","es","lib","umd"],"scripts":{"build":"nwb build-react-component --no-demo","clean":"nwb clean-module && nwb clean-demo","start":"nwb serve-react-demo","test":"nwb test-react","test:coverage":"nwb test-react --coverage","test:watch":"nwb test-react --server"},"dependencies":{},"peerDependencies":{"react":"16.x"},"devDependencies":{"nwb":"0.21.x","react":"^16.4.1","react-dom":"^16.4.1"},"author":{"name":"Gorka"},"homepage":"https://github.com/AquiGorka/compose#readme","license":"MIT","repository":{"type":"git","url":"git+https://github.com/AquiGorka/compose.git"},"keywords":["react-component"],"directories":{"lib":"lib"},"bugs":{"url":"https://github.com/AquiGorka/compose/issues"},"gitHead":"7a6a6e60eb3ab5d2c983d0c307b1e5664979379b","_id":"@aquigorka/compose@1.0.0","_npmVersion":"5.6.0","_nodeVersion":"9.10.1","_npmUser":{"name":"aquigorka","email":"gorka@aquigorka.com"},"dist":{"integrity":"sha512-P30TcAKvQpMBs0DPWzwVvEnfYbO8uaw3yTiqbxkWodyOIIedCh7pjvtJgU0sZ4cYOwmu5u6gvd5kPhUpFzH0Zg==","shasum":"f6a555733e4cf3fb96ba684d8d6b6c2926633746","tarball":"https://registry.npmjs.org/@aquigorka/compose/-/compose-1.0.0.tgz","fileCount":4,"unpackedSize":4117,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbLgjFCRA9TVsSAnZWagAAbCsP+gMqxJ6OK6CzAQURMdiR\nW5Sus/KV0AJWqIir4mTi8lOBQahYUAr5/TtM7H2UJ8zfYmDl3YxjpQ7C6rQ4\nYgXQBQS/z9wTFyxA5gyJiPRoAD2uMfPZjf+eg9QxH4w8c4SMuDNoIpUYKXTq\nuAFhrSu+84Ifayr5fVKsLk75lKUJEwgxznanUslNRYrAYYEhEvrrTNLjbxQq\nCch5FsUceNgjholhvXVuoMjZ/SSvysiCoxKY4lybKYUh4SRLNjwfNWtawL8Q\nCUcH299S21wljSDIyeJrHotWDPRHXpoeuDmIXHKjE1GX3BwmWPDIbRK/Ww1u\n85XtLKZOIqtL6vsdoj4FMrryRM99vy8IJaCAnfjGX5C/mXwLlBPAVgR3ngyo\nRcb2yU6X6ddr8saglkxqo7qJq6pRggmXIwgClNS5o/mx85DdNcLNJx1S3+ps\nvpOqFZ5FQ2VzsmHVSS/oYLn32IylwZfzp3m04aAKGpotqyZeSEnDiSK+j31U\nEGvM+QfYoze35XuUfBVJhtyDdb8OeUBCNH22q4nudNfOnaYDbYVLyLzygqdp\nGkgQbzVijsrOYaoUA5Z9vaTQTirFhwkq14BMPew+mK3IRah5m9gKZTTwJ9K1\nzyjp6irGNv0pHujDv55fcnVe7kLJgFE+kZsD8cq3G48mwuHeBD5Q5k2S/RcR\ns5ci\r\n=wD92\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQCyyQEE8GiYfppA9mFVnL6Zxfudytp93BzZupGAenUocAIhAL0xgmDIr65kvrIrjcqi4Vy9x15R5XI1gHxc3++g+cwW"}]},"maintainers":[{"name":"aquigorka","email":"gorka@aquigorka.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/compose_1.0.0_1529743557597_0.651575476475142"},"_hasShrinkwrap":false}},"time":{"created":"2018-06-23T08:45:57.342Z","1.0.0":"2018-06-23T08:45:57.644Z","modified":"2022-04-04T15:14:07.014Z"},"maintainers":[{"name":"aquigorka","email":"gorka@aquigorka.com"}],"description":"React component composition helper","homepage":"https://github.com/AquiGorka/compose#readme","keywords":["react-component"],"repository":{"type":"git","url":"git+https://github.com/AquiGorka/compose.git"},"author":{"name":"Gorka"},"bugs":{"url":"https://github.com/AquiGorka/compose/issues"},"license":"MIT","readme":"# Compose\n\nReact component composition helper. Benefits:\n\n- Split view from store and/or side effects, basically from any non-view logic.\n- Split stores from side effects.\n- No need for extra libraries, keep everything in Components.\n\n```js\n\n// view should be able to handle the possible states (eg. loading)\nconst View = ({ value, valueLoading }) => valueLoading\n  ? <div>Loading...</div>\n  : <div>{value}</div>\n\n// store: get, put, post, delete, etc\nclass Store extends Component {\n  state = { value: null, loading: false }\n\n  render() {\n    const { children, ...rest } = this.props\n    const { value, loading } = this.state\n\n    <Fragment>\n      {Children.map(children, child =>\n        cloneElement(child, {\n          ...rest,\n          valueGet: this.get,\n          valuePost: this.post,\n          valueLoading: loading,\n          value\n        }),\n      )}\n    </Fragment>\n  }\n\n  get = () => {\n    // fetch value\n    this.setState({ loading: true })\n    setTimeout(() => this.setState({ value: 1, loading: false }), 1000)\n  }\n\n  post = () => { /*...*/ }\n}\n\n// side effects, like fetching value on mount\nclass Saga extends Component {\n  componentDidMount() {\n    this.props.valueGet()\n  }\n\n  render() {\n    const { children, ...props } = this.props\n    const { valuePost, ...rest } = props\n\n    <Fragment>\n      {Children.map(children, child =>\n        cloneElement(child, { ...rest, valuePost: this.post }),\n      )}\n    </Fragment>\n  }\n\n  post = data => {\n    // handle side effects, then dispatch the action further up\n    // possible side effect eg. some other request\n    this.props.post(data)\n  }\n}\n\nconst SagaStore = Compose(Store, Saga)\n\nexport { SagaStore as Store, View }\nexport default Compose(SagaStore, View)\n```\n","readmeFilename":"README.md"}