{"_id":"react-listener-provider","_rev":"3267731","name":"react-listener-provider","description":"Create a provider and use HOC (Higher Order Components) to listen for [Events](https://developer.mozilla.org/en-US/docs/Web/Events) in one place.","dist-tags":{"latest":"0.2.0"},"maintainers":[{"name":"jnsdls","email":""}],"time":{"modified":"2024-03-21T10:00:38.000Z","created":"2017-03-21T06:50:42.622Z","0.2.0":"2017-05-07T11:22:55.255Z","0.1.2":"2017-03-21T17:06:29.120Z","0.1.1":"2017-03-21T06:52:00.592Z","0.1.0":"2017-03-21T06:50:42.622Z"},"users":{},"author":{"name":"Jonas Daniels","email":"jonas@bebo.com","url":"https://www.twitter.com/jnsdls"},"repository":{"type":"git","url":"git+https://github.com/jnsdls/react-listener-provider.git"},"versions":{"0.2.0":{"name":"react-listener-provider","version":"0.2.0","main":"lib/index.js","license":"MIT","scripts":{"build":"rimraf lib && babel src --out-dir lib","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/jnsdls/react-listener-provider.git"},"author":{"name":"Jonas Daniels","email":"jonas@bebo.com","url":"https://www.twitter.com/jnsdls"},"devDependencies":{"babel-cli":"^6.24.0","babel-plugin-transform-class-properties":"^6.23.0","babel-plugin-transform-object-rest-spread":"^6.23.0","babel-preset-env":"^1.2.2","babel-preset-react":"^6.23.0","flow-bin":"^0.41.0","invariant":"^2.2.2","rimraf":"^2.6.1"},"peerDependencies":{"react":"^15.0.0 || ^16.0.0","react-dom":"^15.0.0 || ^16.0.0","prop-types":"^15.5.8"},"gitHead":"7177497ed22391907c208c2acfd2b24d959459d0","description":"Create a provider and use HOC (Higher Order Components) to listen for [Events](https://developer.mozilla.org/en-US/docs/Web/Events) in one place.","bugs":{"url":"https://github.com/jnsdls/react-listener-provider/issues"},"homepage":"https://github.com/jnsdls/react-listener-provider#readme","_id":"react-listener-provider@0.2.0","_shasum":"fb6ce123f9e20ad948f75906ddf647db1df31f18","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.9.4","_npmUser":{"name":"jnsdls","email":"jonas@bebo.com"},"dist":{"shasum":"fb6ce123f9e20ad948f75906ddf647db1df31f18","size":21031,"noattachment":false,"key":"/react-listener-provider/-/react-listener-provider-0.2.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-listener-provider/download/react-listener-provider-0.2.0.tgz"},"maintainers":[{"name":"jnsdls","email":""}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-listener-provider-0.2.0.tgz_1494156173353_0.2167108750436455"},"directories":{},"_cnpmcore_publish_time":"2021-12-19T16:21:37.872Z","publish_time":1494156175255,"_cnpm_publish_time":1494156175255},"0.1.2":{"name":"react-listener-provider","version":"0.1.2","main":"lib/index.js","license":"MIT","scripts":{"build":"rimraf lib && babel src --out-dir lib","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/jnsdls/react-listener-provider.git"},"author":{"name":"Jonas Daniels","email":"jonas@bebo.com","url":"https://www.twitter.com/jnsdls"},"devDependencies":{"babel-cli":"^6.24.0","babel-plugin-transform-class-properties":"^6.23.0","babel-plugin-transform-object-rest-spread":"^6.23.0","babel-preset-env":"^1.2.2","babel-preset-react":"^6.23.0","flow-bin":"^0.41.0","invariant":"^2.2.2","rimraf":"^2.6.1"},"peerDependencies":{"react":"^15.4.2","react-dom":"^15.4.2"},"gitHead":"6308d99456c5afd8d371443ace3081f1277c6e9e","description":"Create a provider and use HOC (Higher Order Components) to listen for [Events](https://developer.mozilla.org/en-US/docs/Web/Events) in one place.","bugs":{"url":"https://github.com/jnsdls/react-listener-provider/issues"},"homepage":"https://github.com/jnsdls/react-listener-provider#readme","_id":"react-listener-provider@0.1.2","_shasum":"40338f198800f8991a8d9284f5617dffe51aebc1","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.9.4","_npmUser":{"name":"jnsdls","email":"jonas@bebo.com"},"dist":{"shasum":"40338f198800f8991a8d9284f5617dffe51aebc1","size":25093,"noattachment":false,"key":"/react-listener-provider/-/react-listener-provider-0.1.2.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-listener-provider/download/react-listener-provider-0.1.2.tgz"},"maintainers":[{"name":"jnsdls","email":""}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/react-listener-provider-0.1.2.tgz_1490115987208_0.9955454345326871"},"directories":{},"_cnpmcore_publish_time":"2021-12-19T16:21:36.793Z","publish_time":1490115989120,"_cnpm_publish_time":1490115989120},"0.1.1":{"name":"react-listener-provider","version":"0.1.1","main":"lib/index.js","license":"MIT","scripts":{"build":"rimraf lib && babel src --out-dir lib","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/jnsdls/react-listener-provider.git"},"author":{"name":"Jonas Daniels","email":"jonas@bebo.com","url":"https://www.twitter.com/jnsdls"},"devDependencies":{"babel-cli":"^6.24.0","babel-plugin-transform-class-properties":"^6.23.0","babel-plugin-transform-object-rest-spread":"^6.23.0","babel-preset-env":"^1.2.2","babel-preset-react":"^6.23.0","flow-bin":"^0.41.0","invariant":"^2.2.2","rimraf":"^2.6.1"},"peerDependencies":{"react":"^15.4.2","react-dom":"^15.4.2"},"gitHead":"14a3e5339f387f9e7cdeeddc75e0a844f7898afc","description":"","bugs":{"url":"https://github.com/jnsdls/react-listener-provider/issues"},"homepage":"https://github.com/jnsdls/react-listener-provider#readme","_id":"react-listener-provider@0.1.1","_shasum":"8e6be2d356aff432f3110079c6f53d94248dc8d4","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.9.4","_npmUser":{"name":"jnsdls","email":"jonas@bebo.com"},"dist":{"shasum":"8e6be2d356aff432f3110079c6f53d94248dc8d4","size":23990,"noattachment":false,"key":"/react-listener-provider/-/react-listener-provider-0.1.1.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-listener-provider/download/react-listener-provider-0.1.1.tgz"},"maintainers":[{"name":"jnsdls","email":""}],"_npmOperationalInternal":{"host":"packages-12-west.internal.npmjs.com","tmp":"tmp/react-listener-provider-0.1.1.tgz_1490079120302_0.7718396191485226"},"directories":{},"_cnpmcore_publish_time":"2021-12-19T16:21:35.728Z","publish_time":1490079120592,"_cnpm_publish_time":1490079120592},"0.1.0":{"name":"react-listener-provider","version":"0.1.0","main":"lib/index.js","license":"MIT","scripts":{"build":"rimraf lib && babel src --out-dir lib","prepublish":"npm run build"},"repository":{"type":"git","url":"git+https://github.com/jnsdls/react-perimeter.git"},"author":{"name":"Jonas Daniels","email":"jonas@bebo.com","url":"https://www.twitter.com/jnsdls"},"devDependencies":{"babel-cli":"^6.24.0","babel-plugin-transform-class-properties":"^6.23.0","babel-plugin-transform-object-rest-spread":"^6.23.0","babel-preset-env":"^1.2.2","babel-preset-react":"^6.23.0","flow-bin":"^0.41.0","invariant":"^2.2.2","rimraf":"^2.6.1"},"peerDependencies":{"react":"^15.4.2","react-dom":"^15.4.2"},"gitHead":"96f72af266c95f6ae6a184558d1d96ba1e972b02","description":"","bugs":{"url":"https://github.com/jnsdls/react-perimeter/issues"},"homepage":"https://github.com/jnsdls/react-perimeter#readme","_id":"react-listener-provider@0.1.0","_shasum":"306273ab8db2e90335aecd7a70d7a8c66b3788e6","_from":".","_npmVersion":"3.10.10","_nodeVersion":"6.9.4","_npmUser":{"name":"jnsdls","email":"jonas@bebo.com"},"dist":{"shasum":"306273ab8db2e90335aecd7a70d7a8c66b3788e6","size":24052,"noattachment":false,"key":"/react-listener-provider/-/react-listener-provider-0.1.0.tgz","tarball":"http://registry.cnpm.dingdandao.com/react-listener-provider/download/react-listener-provider-0.1.0.tgz"},"maintainers":[{"name":"jnsdls","email":""}],"_npmOperationalInternal":{"host":"packages-18-east.internal.npmjs.com","tmp":"tmp/react-listener-provider-0.1.0.tgz_1490079040798_0.7088632602244616"},"directories":{},"_cnpmcore_publish_time":"2021-12-19T16:21:34.657Z","publish_time":1490079042622,"_cnpm_publish_time":1490079042622}},"readme":"# react-listener-provider\n\nCreate a provider and use HOC (Higher Order Components) to listen for [Events](https://developer.mozilla.org/en-US/docs/Web/Events) in one place.\n\n\n## Usage Example\n\n`react-listener-provider` exports a `ReactListenerProvider` component as well as a `withListener()` wrapper function.\n\nComponents wrapped with `withListener()` will have an added prop `listener` which exposes `add()` and `remove()` methods.\n\n`add()` and `remove()` work just like `window.addEventListener()` and `window.removeEventListener()`, they take a `type ` argument and a `callback ` argument.\n\n```jsx\nimport React, { Component } from 'react';\nimport ReactListenerProvider, { withListener } from '../../src';\n\nclass MouseMove extends Component {\n state = { x: 0, y: 0 };\n\n componentDidMount() {\n const { add } = this.props.listener;\n add('mousemove', ({ clientX: x, clientY: y }) => this.setState({ x, y }));\n }\n\n componentWillUnmount() {\n const { remove } = this.props.listener;\n remove('mousemove', ({ clientX: x, clientY: y }) => this.setState({ x, y }));\n }\n\n render() {\n const { x, y } = this.state;\n return (\n
\n x: {x}\n - \n y: {y}\n
\n );\n }\n}\n\n\nconst WrappedComponent = withListener(MouseMove);\n\n\nclass App extends Component {\n render() {\n return (\n \n \n \n );\n }\n}\n```\n\n\n## Installation\n\n```\nyarn add react-listener-provider\n```\nSince version 0.2.0 you'll also need \"prop-types\" as a peer dependency.\n```\nyarn add prop-types\n```\n\n\n## API\n\n### Props\n\n#### ReactListenerProvider\n\n`none`\n\n#### Component wrapped with `withListener()`\n```jsx\nlistener: React.PropTypes.shape({\n add: React.PropTypes.func.isRequired,\n remove: React.PropTypes.func.isRequired\n }).isRequired\n```\n\n\n## Development\n\n1) clone this repo\n2) `yarn`\n3) `cd demo`\n4) `yarn && yarn start`\n\n\n## Attribution\n\nThe repo structure as well as the inspiration to create this project come from [react-perimiter](https://github.com/aweary/react-perimeter).\n\nThanks to [@aweary](https://github.com/aweary) for the encouragement.\n","_attachments":{},"homepage":"https://github.com/jnsdls/react-listener-provider#readme","bugs":{"url":"https://github.com/jnsdls/react-listener-provider/issues"},"license":"MIT"}