{"id":21592933,"url":"https://github.com/jonabrams/react-create-event","last_synced_at":"2025-04-10T23:25:47.068Z","repository":{"id":255447250,"uuid":"852565273","full_name":"JonAbrams/react-create-event","owner":"JonAbrams","description":"A simple library to send events between React components.","archived":false,"fork":false,"pushed_at":"2025-02-25T07:22:04.000Z","size":56,"stargazers_count":3,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-06T19:58:56.393Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/JonAbrams.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"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}},"created_at":"2024-09-05T03:01:13.000Z","updated_at":"2025-02-25T07:22:07.000Z","dependencies_parsed_at":"2024-09-12T00:04:23.511Z","dependency_job_id":null,"html_url":"https://github.com/JonAbrams/react-create-event","commit_stats":null,"previous_names":["jonabrams/react-create-event"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonAbrams%2Freact-create-event","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonAbrams%2Freact-create-event/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonAbrams%2Freact-create-event/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/JonAbrams%2Freact-create-event/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/JonAbrams","download_url":"https://codeload.github.com/JonAbrams/react-create-event/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248313763,"owners_count":21082908,"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":[],"created_at":"2024-11-24T17:10:34.482Z","updated_at":"2025-04-10T23:25:47.056Z","avatar_url":"https://github.com/JonAbrams.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-create-event\n\nA simple library for sending events between React components (aka client-side pub/sub).\n\nFeatures:\n\n- Fire events from anywhere.\n- Listen to events inside of components using the event's `useListen` hook.\n- Supports TypeScript, but it is not required.\n- Can create events that include details from the sender.\n- Can create events that include results from listeners.\n\n## Install\n\n```\nnpm install react-create-event\n```\n\n## Usage (Basic Case)\n\nCreate the event, and and export it (it's recommended to create them in one file):\n\n```ts\n// File: events.ts | events.js\nimport { createEvent } from \"react-create-event\";\n\nexport const hitEvent = createEvent();\n```\n\nFires the event:\n\n```jsx\nimport { hitEvent } from \"../events\";\n\nexport function Hitter() {\n  return \u003cbutton onClick={() =\u003e hitEvent.fire()}\u003eHit\u003c/button\u003e;\n}\n```\n\nListen for the event:\n\n```jsx\nimport { hitEvent } from \"../events\";\n\nexport function HitCounter() {\n  const [count, setCount] = useState(0);\n\n  hitEvent.useListen(() =\u003e {\n    setCount((c) =\u003e c + 1);\n  }, []);\n\n  return \u003cdiv\u003eCount: {count}\u003c/div\u003e;\n}\n```\n\n## Usage (Advanced Case)\n\n```ts\nimport { createEvent } from \"react-create-event\";\n\nexport interface Coordinates {\n  x: number;\n  y: number;\n}\n\n// First type is the \"details\" sent with each event.\n// Second type is the return type, returned by each listener.\nexport const torpedoEvent = createEvent\u003cCoordinates, boolean | void\u003e();\n```\n\nFire the event:\n\n```jsx\nimport { torpedoEvent } from \"../events\";\n\nexport function TorpedoLauncher() {\n  const [hitCount, setHitCount] = useState(0);\n  const fireTorpedo = useCallback(() =\u003e {\n    const x = Math.floor(Math.random() * 10);\n    const y = Math.floor(Math.random() * 10);\n\n    const results = torpedoEvent.fire({ x, y });\n    const hits = results.filter((r) =\u003e r).length;\n    setHitCount((hC) =\u003e hC + hits);\n  }, []);\n\n  return \u003c\u003e\n    \u003cbutton onClick={fireTorpedo}\u003eFIRE TORPEDO!\u003c/button\u003e\n    \u003cdiv\u003eSuccessful hits so far: {hitCount}\u003c/button\u003e\n  \u003c/\u003e;\n}\n```\n\nListen for the event:\n\n```jsx\nimport { torpedoEvent, type Coordinates } from \"../events\";\n\nexport function Ship({ x, y }: Coordinates) {\n  const [hitCount, setHitCount] = useState(0);\n\n  torpedoEvent.useListen(\n    (details: Coordinates) =\u003e {\n      if (details.x === x \u0026\u0026 details.y === y) {\n        setHitCount((hC) =\u003e hC + 1);\n        return true;\n      }\n    },\n    [x, y] // hook dependencies\n  );\n\n  return \u003cdiv\u003eTimes this ship was hit: {hitCount}\u003c/div\u003e;\n}\n```\n\n## Created by\n\nCopyright [Jon Abrams (2024)](https://threads.net/@jon.abrams)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonabrams%2Freact-create-event","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjonabrams%2Freact-create-event","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjonabrams%2Freact-create-event/lists"}