{"id":24568167,"url":"https://github.com/janeksmielowski/event-bus","last_synced_at":"2025-04-22T15:24:58.147Z","repository":{"id":57121114,"uuid":"321161295","full_name":"janeksmielowski/event-bus","owner":"janeksmielowski","description":"React Event Bus library for post messaging in JS/TS","archived":false,"fork":false,"pushed_at":"2022-10-14T00:37:03.000Z","size":8,"stargazers_count":14,"open_issues_count":2,"forks_count":2,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-13T04:01:51.834Z","etag":null,"topics":["bus","event","event-bus","eventbus","javascript","message","post","post-message","postmessage","react","spa","typescript"],"latest_commit_sha":null,"homepage":"https://janeksmielowski.github.io/event-bus/","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/janeksmielowski.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-12-13T21:13:24.000Z","updated_at":"2023-07-27T03:07:02.000Z","dependencies_parsed_at":"2022-08-23T05:20:16.733Z","dependency_job_id":null,"html_url":"https://github.com/janeksmielowski/event-bus","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":"janeksmielowski/react-ts-library","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janeksmielowski%2Fevent-bus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janeksmielowski%2Fevent-bus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janeksmielowski%2Fevent-bus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/janeksmielowski%2Fevent-bus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/janeksmielowski","download_url":"https://codeload.github.com/janeksmielowski/event-bus/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":249845559,"owners_count":21333735,"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":["bus","event","event-bus","eventbus","javascript","message","post","post-message","postmessage","react","spa","typescript"],"created_at":"2025-01-23T14:19:58.946Z","updated_at":"2025-04-22T15:24:58.121Z","avatar_url":"https://github.com/janeksmielowski.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# React Event Bus hook\n\nThis library provides easy-to-use React hook, for dispatching messages, via JavaScript `postMessage` function.\nIt is implemented using event bus design pattern, which is based on publish/subscription model.\n\n## Basic usage\n\n1. Create a file for event bus message types (skip if you're not using TypeScript):\n\n```ts\nexport interface LoaderVisibilityMessage {\n    visible: boolean;\n}\n\n// ... more message structures here\n\nexport interface EventBusMessages {\n    LoaderVisibility: LoaderVisibilityMessage;\n    // ... rest of messages here\n}\n```\nLet's pretend you have some SPA application, that will show some microservice in a frame. For better user experience, you would like to show some loader on it, before the service will finish loading.\n\nFor this reason, you will need to create `LoaderVisibilityMessage`, that will carry loader visibility state. Finally, you put all message structures, that your app will use, into a single `EventBusMessages` interface.\n\n2. Subscribe for a topic in your \u003ci\u003esubscriber\u003c/i\u003e component:\n\n```ts\nimport { EventBusMessages } from 'EventBus.types.ts';\n\nconst SubscriberComponent: FunctionComponent = () =\u003e {\n    const eventBus = useEventBus\u003cEventBusMessages\u003e();\n    const [loaderVisible, setLoaderVisible] = useState(true);\n\n    useEffect(() =\u003e {\n        const loaderListener = eventBus.subscribe('LoaderVisibility', handler);\n        return () =\u003e {\n            loaderListener.unsubscribe();\n        };\n    }, []);\n\n    const handler = (message: LoaderVisibilityMessage) =\u003e {\n        setLoaderVisible(message.visible);\n    };\n\n    return \u003cdiv\u003e{loaderVisible \u0026\u0026 'Loading...'}\u003c/div\u003e;\n}\n```\n\nThis will be the code for your SPA application. The subscriber will 'listen' to any message with topic `LoaderVisibility`. When the message comes, the event bus will fire `handler` function and pass incoming message payload.\n\n\u003cb\u003eImportant:\u003c/b\u003e Always remember to unsubscribe from the event. Event bus works with listeners, so you wouldn't like to have any 'zombie' listeners in your application.\n\n2. Publish message from your \u003ci\u003epublisher\u003c/i\u003e component:\n\n```ts\nimport { EventBusMessages } from 'EventBus.types.ts';\n\nconst PublisherComponent: FunctionComponent = () =\u003e {\n    const eventBus = useEventBus\u003cEventBusMessages\u003e();\n\n    useEffect(() =\u003e {\n        eventBus.publish({\n            topic: 'LoaderVisibility',\n            payload: { visible: false }\n        });\n        return () =\u003e {\n            eventBus.publish({\n                topic: 'LoaderVisibility',\n                payload: { visible: true }\n            });\n        };\n    }, []);\n\n    return \u003cdiv\u003eHello from microservice!\u003c/div\u003e;\n}\n```\n\nOnce the microservice application renders, it will automatically publish message indicating, that it doesn't need loader to be visible.\n\n\u003cb\u003eNote:\u003c/b\u003e We're also publishing the message to show the loader back again, when the component will unmount or reload.\n\n## Learn more\n\nThis project was bootstrapped with [React TypeScript Library Template](https://github.com/janeksmielowski/react-ts-library)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaneksmielowski%2Fevent-bus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjaneksmielowski%2Fevent-bus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjaneksmielowski%2Fevent-bus/lists"}