{"id":15375537,"url":"https://github.com/etienne-martin/react-event-hook","last_synced_at":"2025-04-14T00:37:27.563Z","repository":{"id":40253629,"uuid":"469546657","full_name":"etienne-martin/react-event-hook","owner":"etienne-martin","description":"A library for emitting and listening to events in a React application.","archived":false,"fork":false,"pushed_at":"2023-04-07T19:09:57.000Z","size":190,"stargazers_count":58,"open_issues_count":1,"forks_count":1,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-07T20:21:29.467Z","etag":null,"topics":["events","hook","hooks","javascript","react","react-hooks","typescript"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/etienne-martin.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["etienne-martin"]}},"created_at":"2022-03-14T01:52:52.000Z","updated_at":"2025-01-29T23:25:52.000Z","dependencies_parsed_at":"2024-06-19T13:44:01.828Z","dependency_job_id":null,"html_url":"https://github.com/etienne-martin/react-event-hook","commit_stats":{"total_commits":43,"total_committers":2,"mean_commits":21.5,"dds":"0.023255813953488413","last_synced_commit":"948d7153ee4a3cb0775e1c5c9043c4787dac4f06"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etienne-martin%2Freact-event-hook","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etienne-martin%2Freact-event-hook/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etienne-martin%2Freact-event-hook/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/etienne-martin%2Freact-event-hook/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/etienne-martin","download_url":"https://codeload.github.com/etienne-martin/react-event-hook/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248803693,"owners_count":21164097,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["events","hook","hooks","javascript","react","react-hooks","typescript"],"created_at":"2024-10-01T14:03:56.731Z","updated_at":"2025-04-14T00:37:27.538Z","avatar_url":"https://github.com/etienne-martin.png","language":"TypeScript","funding_links":["https://github.com/sponsors/etienne-martin"],"categories":[],"sub_categories":[],"readme":"# React Event Hook\n\nA library for emitting and listening to events within a React application.\n\nThis package was inspired by [a Tweet](https://twitter.com/pedronauck/status/1502792417761800193?s=20\u0026t=PFC7inszDOUhRFf7se88UA) from [@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 install react-event-hook into your project, run the following command:\n\n```bash\nyarn add react-event-hook\n```\n\n## Event Creation\n\nUse the `createEvent` function to declare events. The only required argument is the event name. The function returns an object containing a listener and an emitter function, both named based on the provided event name.\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\nEnable the `crossTab` option to extend events to other tabs sharing the same origin. This feature allows local propagation of changes across multiple application instances.\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 Warning\n\nSince events are registered globally, ensure each event is created only once. Duplicate events sharing the same name may cause issues if their payloads differ. To avoid such problems, reuse the functions provided by `createEvent` throughout your application.\n\n## Event Listeners\n\nUse the listener function returned by `createEvent` to listen for events. Listeners are implemented as custom React hooks.\n\n```jsx\nimport { useMessageListener } from \"./events\";\n\nconst ListenerComponent = () =\u003e {\n  useMessageListener((message) =\u003e {\n    console.log(\"Received a message:\", message);\n  });\n\n  return \u003c\u003e...\u003c/\u003e;\n};\n```\n\n## Event Emitters\n\nEmit events from anywhere in your application using the emitter function returned by `createEvent`.\n\n```jsx\nimport { emitMessage } from \"./events\";\n\nconst EmitterComponent = () =\u003e (\n  \u003cbutton onClick={() =\u003e emitMessage(\"hello\")}\u003eSend Message\u003c/button\u003e\n);\n```\n\nCross-tab event payloads are 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 arrays, objects, or primitive values (strings, numbers, booleans, null, undefined).\n\n### Broadcasting Events (Cross-Tab)\n\nBroadcast events exclusively to other tabs using the `broadcast` function. The emitting tab will not receive the event, but other tabs will. Ensure the `crossTab` option is enabled for your event.\n\n```jsx\nimport { emitMessage } from \"./events\";\n\nconst EmitterComponent = () =\u003e (\n  \u003cbutton onClick={() =\u003e emitMessage.broadcast(\"hello\")}\u003eSend Message\u003c/button\u003e\n);\n```\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\nSpecify event types 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\")\u003cMessage\u003e();\n\nemitMessage({\n  subject: \"greeting\",\n  body: \"hello\"\n});\n```\n\n## Contributing\n\nWhen contributing to this project, please first discuss the proposed changes through a [GitHub issue](https://github.com/etienne-martin/react-event-hook/issues/new).\n\nExecute `yarn test` and update the tests as necessary.\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","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fetienne-martin%2Freact-event-hook","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fetienne-martin%2Freact-event-hook","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fetienne-martin%2Freact-event-hook/lists"}