{"_id":"@cara-care/react-event-hook","_rev":"3-210be7da57ef2db8a789500c9d0929de","time":{"created":"2022-11-17T11:16:11.208Z","3.0.4":"2022-11-17T11:14:27.934Z","modified":"2022-11-17T11:25:05.288Z","1.0.0":"2022-11-17T11:16:11.369Z","1.0.1":"2022-11-17T11:25:05.207Z"},"name":"@cara-care/react-event-hook","dist-tags":{"latest":"1.0.1"},"versions":{"1.0.0":{"name":"@cara-care/react-event-hook","version":"1.0.0","description":"A library for emitting and listening to events in a React application","license":"MIT","keywords":["react","hook","hooks","react-hooks","event","events","event-emitter","pubsub","typescript"],"author":{"name":"Etienne Martin","url":"https://etiennemartin.ca/"},"repository":{"type":"git","url":"git+https://github.com/etienne-martin/react-event-hook.git"},"bugs":{"url":"https://github.com/etienne-martin/react-event-hook/issues"},"main":"./index.js","types":"./index.d.ts","scripts":{"dev":"concurrently 'webpack --mode development --watch' 'tsc --watch'","build":"concurrently 'webpack --mode production' 'tsc'","predev":"yarn cleanup","prebuild":"yarn cleanup","cleanup":"rm -rf ./dist","test":"jest src --coverage --verbose","coverage":"coveralls < ./coverage/lcov.info"},"peerDependencies":{"react":">=17.0.2","react-dom":">=17.0.2"},"dependencies":{"eventemitter3":"^4.0.7"},"devDependencies":{"@babel/core":"^7.17.5","@babel/plugin-transform-runtime":"^7.17.0","@babel/preset-env":"^7.16.11","@babel/preset-react":"^7.16.7","@babel/preset-typescript":"^7.16.7","@testing-library/react":"^12.1.4","@testing-library/react-hooks":"^7.0.2","@types/jest":"^27.4.1","@types/react":"^17.0.40","@types/react-dom":"^17.0.13","@types/webpack":"^5.28.0","@typescript-eslint/eslint-plugin":"^5.14.0","@typescript-eslint/parser":"^5.14.0","babel-jest":"^27.5.1","babel-loader":"^8.2.3","circular-dependency-plugin":"^5.2.2","concurrently":"^7.0.0","coveralls":"^3.1.1","eslint":"^8.11.0","eslint-config-prettier":"^8.5.0","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.29.3","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","fork-ts-checker-webpack-plugin":"^7.2.1","jest":"^27.5.1","prettier":"^2.5.1","react":"^17.0.2","react-dom":"^17.0.2","terser-webpack-plugin":"^5.3.1","tsd":"^0.20.0","typescript":"^4.6.2","webpack":"^5.70.0","webpack-cli":"^4.9.2"},"gitHead":"b252abe3c138855891275ad221ec1ec2404201d5","homepage":"https://github.com/etienne-martin/react-event-hook#readme","_id":"@cara-care/react-event-hook@1.0.0","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-vYESFQ4AxMqy6Q9/KJRu8c0TeMUELWkLam1PGG2cYnaey1zSrMwbLCXBTdmUk0hF2M87AyWS0040bvq3AicA0Q==","shasum":"edc178932699c5404e1d5752b3f8fa0b65cc81b2","tarball":"https://registry.npmjs.org/@cara-care/react-event-hook/-/react-event-hook-1.0.0.tgz","fileCount":43,"unpackedSize":22684,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDqNANVkRtC/yaAWSprjKsbrtMhKEfhUJ0gl3ETzgFEIAIgIwM3nU/8F4udOy9GlsClj93G2SbdNizQYvkCTaaZT8Y="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdhf7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptIw//Y75u9QOEhFOeKeLk1vBgywaUCxeAN5+4eXSqK9iQHnfZyA4S\r\ng8YPY6mNMYyJ4lSS/72FpB6hsx2MQGTnEoYtR5gitBivVNCUbySyzJkuj1cP\r\n6J4nOrnBW6DV+NkFVHOaD7Qn+cLBqwKIl3DngeNmAmX6nq8VeErLtobyG4RW\r\nW/LKtOOQogeTPKWcH4PmOAzqj/sG5/VofkbCX5smHVYe5uuoPzm2PXw42IYi\r\nwoZb3c4FanM8jJLiIUhIRVuEcLSZpca4o2Pj1jrJLNCQ2OHxzWEVLRlwm0yQ\r\ntemVbLIVTxy7zJMDhCyi6AxuGbvc/cFsTc3qRY1v6t5+WKWR7VJy7BxO/pxW\r\nCze+D/riekQTs84ZHwS205fwfkwEs+f0CeKx+iHshm6oJZBBl4GcvQ4Nbn8q\r\na652zH1wUDXtfjHgpPQnNwVSSZIlCUMosPbxYKMLHUoThDANuXyHMI5w65s4\r\nAyOegoj9WuxTSCPw2DF1osjO2Js2Tx1EuwizFlP2jLxrYKxq4JsvTh1Dvr5v\r\nmBG1RqevJfcjRfQK05RGnhAg7B3euLRPQm6knhWJOXJcSuKSS81Ja9qe12sl\r\nMKgPMUNYkNxXHuUi/vx1HlpecXVoJkjnLkgXfeIDxed1GQ1BVfcJOSWZupeB\r\nzDVVheuGOjQb7KNaSGs+jmjAzgH05vPivig=\r\n=q7uP\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cara-care","email":"devs@cara.care"},"directories":{},"maintainers":[{"name":"cara-care","email":"devs@cara.care"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-event-hook_1.0.0_1668683771268_0.180593233669613"},"_hasShrinkwrap":false},"1.0.1":{"name":"@cara-care/react-event-hook","version":"1.0.1","description":"A library for emitting and listening to events in a React application","license":"MIT","keywords":["react","hook","hooks","react-hooks","event","events","event-emitter","pubsub","typescript"],"author":{"name":"Etienne Martin","url":"https://etiennemartin.ca/"},"repository":{"type":"git","url":"git+https://github.com/etienne-martin/react-event-hook.git"},"bugs":{"url":"https://github.com/etienne-martin/react-event-hook/issues"},"main":"dist/index.js","types":"dist/index.d.ts","scripts":{"dev":"concurrently 'webpack --mode development --watch' 'tsc --watch'","build":"concurrently 'webpack --mode production' 'tsc'","predev":"yarn cleanup","prebuild":"yarn cleanup","cleanup":"rm -rf ./dist","test":"jest src --coverage --verbose","coverage":"coveralls < ./coverage/lcov.info"},"peerDependencies":{"react":">=17.0.2","react-dom":">=17.0.2"},"dependencies":{"eventemitter3":"^4.0.7"},"devDependencies":{"@babel/core":"^7.17.5","@babel/plugin-transform-runtime":"^7.17.0","@babel/preset-env":"^7.16.11","@babel/preset-react":"^7.16.7","@babel/preset-typescript":"^7.16.7","@testing-library/react":"^12.1.4","@testing-library/react-hooks":"^7.0.2","@types/jest":"^27.4.1","@types/react":"^17.0.40","@types/react-dom":"^17.0.13","@types/webpack":"^5.28.0","@typescript-eslint/eslint-plugin":"^5.14.0","@typescript-eslint/parser":"^5.14.0","babel-jest":"^27.5.1","babel-loader":"^8.2.3","circular-dependency-plugin":"^5.2.2","concurrently":"^7.0.0","coveralls":"^3.1.1","eslint":"^8.11.0","eslint-config-prettier":"^8.5.0","eslint-plugin-prettier":"^4.0.0","eslint-plugin-react":"^7.29.3","eslint-plugin-react-hooks":"^4.3.0","eslint-webpack-plugin":"^3.1.1","fork-ts-checker-webpack-plugin":"^7.2.1","jest":"^27.5.1","prettier":"^2.5.1","react":"^17.0.2","react-dom":"^17.0.2","terser-webpack-plugin":"^5.3.1","tsd":"^0.20.0","typescript":"^4.6.2","webpack":"^5.70.0","webpack-cli":"^4.9.2"},"gitHead":"bec8f2c5811a0f57dfe1d5405fa753f501d618cd","homepage":"https://github.com/etienne-martin/react-event-hook#readme","_id":"@cara-care/react-event-hook@1.0.1","_nodeVersion":"16.16.0","_npmVersion":"8.11.0","dist":{"integrity":"sha512-b5euVyPAdvSaXS+VXN91tw/7kWmbIQ5Vg0AGwnT7w5MklzROC6KJOaj/A+DzIS5bwkXrDJFW95Dq1+FR6JwTqQ==","shasum":"0ff7b32b83d6b86e384413396c2ad4ed49ee5889","tarball":"https://registry.npmjs.org/@cara-care/react-event-hook/-/react-event-hook-1.0.1.tgz","fileCount":43,"unpackedSize":22690,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDQHxBJGeYoybP4XFcX/y0/Ay2J0DVtjomhWEQBZOUZoQIgYYhCpRQIpwhEeCgXy04i9dg4h7YWAtw7FTTZYyjBujM="}],"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdhoRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKdA//fK1uDaBr3sx7DLWXGydGoyCcJC6gA+ZQU1eVCriSmnSahcVS\r\nFr3LvQrLkY4CPpqG1qwUP09E9UojkAB+LkyB++ngOHtBez0vewwMR9JwH3/T\r\npjSbz421VS20l1QjDPL3UTj8iUA7ci0YWZe1uXSDfzIxuT9zIlGjFv4nADA+\r\nVG+CH7GzjQXAQ1NQK+t5eRum9qCuiCH8dMCJZH8+hdqThS8kIuS3Tn96FxEi\r\nPamHKpIDvfeUK79PrNHkifgOo0gMOb2NmS1kE2oJvYVydFjjyccOy0GsTCwp\r\nfMw3r4uHy3ea1IVw0snbPO/VNhrv/ddSyt8qItIkoYVwUrGEUFYHRRwCOm5u\r\nCfAANNEI5PyhF1qFH2JMuIX6zSevf98wIAYLKJb2bE/WqXZx/ZDMRwk8IMlv\r\nU4bqUqe9tLwZSqt64NJWMq86yv46mkX4T/yzXsG1EEoNANCte6B9zEa/dOgO\r\n5qs8ZBSbluTQQ3pQGDqL/1uLDp6wt7ggMaydTpiN9AP+nz49541UY0zsUnZK\r\nRhPLoumRLONXEe5X4KnbfgQ9q1jnR0JsbyzC/epj+yuW8eqMLEBqxroooDfB\r\nls6k4CZUZziX8wtP3WBONEGgT06XiNwVqdQnFneDX7a3Ew8lEQC8ym6zXnES\r\nMNaTD00m4NJ6edmJFMU+YIoBQ2hpFRdUuxA=\r\n=edpf\r\n-----END PGP SIGNATURE-----\r\n"},"_npmUser":{"name":"cara-care","email":"devs@cara.care"},"directories":{},"maintainers":[{"name":"cara-care","email":"devs@cara.care"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/react-event-hook_1.0.1_1668684305030_0.25552758868299086"},"_hasShrinkwrap":false}},"maintainers":[{"name":"cara-care","email":"devs@cara.care"}],"description":"A library for emitting and listening to events in a React application","homepage":"https://github.com/etienne-martin/react-event-hook#readme","keywords":["react","hook","hooks","react-hooks","event","events","event-emitter","pubsub","typescript"],"repository":{"type":"git","url":"git+https://github.com/etienne-martin/react-event-hook.git"},"author":{"name":"Etienne Martin","url":"https://etiennemartin.ca/"},"bugs":{"url":"https://github.com/etienne-martin/react-event-hook/issues"},"license":"MIT","readme":"# react-event-hook\n\nA library for emitting and listening to events in a React application. \n\nThe idea for this package came from [a Tweet](https://twitter.com/pedronauck/status/1502792417761800193?s=20&t=PFC7inszDOUhRFf7se88UA) by [@pedronauck](https://github.com/pedronauck).\n\n[![Build status](https://github.com/etienne-martin/react-event-hook/workflows/Build/badge.svg)](https://github.com/etienne-martin/react-event-hook/actions)\n[![Coveralls github](https://img.shields.io/coveralls/github/etienne-martin/react-event-hook.svg)](https://coveralls.io/github/etienne-martin/react-event-hook)\n[![npm monthly downloads](https://img.shields.io/npm/dm/react-event-hook.svg)](https://www.npmjs.com/package/react-event-hook)\n\n## Installation\n\nTo use react-event-hook in your project, run:\n\n```shell script\nyarn add react-event-hook\n```\n\n## Creating events\n\nEvents can be declared using the `createEvent` function. This function only takes the name of the event as an argument. It can be whatever you want. The result will be an object containing two functions, a listener and an emitter. Their name will automatically be derived from the name that was chosen for the event.\n\n```javascript\nimport { createEvent } from \"react-event-hook\";\n\nconst { usePingListener, emitPing } = createEvent(\"ping\")();\nconst { usePongListener, emitPong } = createEvent(\"pong\")();\n```\n\n### Cross-tab events\n\nEvents can also extend to other tabs that share the same origin by enabling the `crossTab` option. This can be used to propagate changes locally between multiple instances of an application.\n\n```javascript\nimport { createEvent } from \"react-event-hook\";\n\nconst { useSignInListener, emitSignIn } = createEvent(\"sign-in\")({\n  crossTab: true\n});\n```\n\n### Duplicate events\n\nPlease note that since events are registered globally, they should only be created once. Duplicate events will share the same listener. This could lead to unexpected issues if their payload differs. Make sure to call the `createEvent` function only once per event and reuse the resulting functions throughout your application.\n\n## Listening for events\n\nEvents can be listened to using the listener function returned by `createEvent`. Listeners come in the form of a custom React hook.\n\n```jsx\nimport { useMessageListener } from \"./events\";\n\nconst ListenerComponent = () => {\n  useMessageListener((message) => {\n    console.log(\"Received a message:\", message);\n  });\n\n  return <>...</>;\n};\n```\n\n## Emitting events\n\nEvents can be emitted from anywhere in your application using the emitter function.\n\n```jsx\nimport { emitMessage } from \"./events\";\n\nconst EmitterComponent = () => (\n  <button onClick={() => emitMessage(\"hello\")}>Send Message</button>\n);\n```\n\nWhen a cross-tab event is emitted, its payload is first serialized using `JSON.stringify`. If a payload contains values that cannot be converted to JSON, an error will be thrown and the event won't be delivered. Cross-tab payloads can contain any of the following value types: arrays, objects, or primitives (strings, numbers, booleans, null, undefined).\n\n## TypeScript\n\nThis library is written in TypeScript to ensure type safety. It requires TypeScript v4.1 or greater due to its use of [Key Remapping](https://www.typescriptlang.org/docs/handbook/2/mapped-types.html#key-remapping-via-as) and [Template Literal Types](https://www.typescriptlang.org/docs/handbook/2/template-literal-types.html).\n\n### Typing events\n\nEvents can be typed using the following syntax:\n\n```typescript\nimport { createEvent } from \"react-event-hook\";\n\ninterface Message {\n  subject: string;\n  body: string;\n}\n\nconst { emitMessage } = createEvent(\"message\")<Message>();\n\nemitMessage({\n  subject: \"greeting\",\n  body: \"hello\"\n});\n```\n\n## Contributing\n\nWhen contributing to this project, please first discuss the change you wish to make via a [GitHub issue](https://github.com/etienne-martin/react-event-hook/issues/new).\n\nRun `yarn test` and update the tests if needed.\n\n## License\n\nThis project is licensed under the MIT License - see the [LICENSE](https://github.com/etienne-martin/react-event-hook/blob/main/LICENSE) file for details.\n","readmeFilename":"README.md"}