{"id":13606512,"url":"https://github.com/fabienjuif/use-bus","last_synced_at":"2025-04-07T17:10:26.083Z","repository":{"id":34923303,"uuid":"190872244","full_name":"fabienjuif/use-bus","owner":"fabienjuif","description":"React hook to subscribe and dispatch events accros React components","archived":false,"fork":false,"pushed_at":"2023-02-03T06:20:01.000Z","size":1139,"stargazers_count":97,"open_issues_count":7,"forks_count":15,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-06T12:42:03.655Z","etag":null,"topics":["bus","eventbus","events","hook","hooks","message","messages","react","reactjs","saumur"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","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/fabienjuif.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":"2019-06-08T09:59:19.000Z","updated_at":"2024-03-12T23:50:15.000Z","dependencies_parsed_at":"2023-02-18T04:01:24.364Z","dependency_job_id":null,"html_url":"https://github.com/fabienjuif/use-bus","commit_stats":null,"previous_names":[],"tags_count":11,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabienjuif%2Fuse-bus","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabienjuif%2Fuse-bus/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabienjuif%2Fuse-bus/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/fabienjuif%2Fuse-bus/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/fabienjuif","download_url":"https://codeload.github.com/fabienjuif/use-bus/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247694876,"owners_count":20980733,"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","eventbus","events","hook","hooks","message","messages","react","reactjs","saumur"],"created_at":"2024-08-01T19:01:09.810Z","updated_at":"2025-04-07T17:10:26.065Z","avatar_url":"https://github.com/fabienjuif.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# use-bus\n\u003e React hook to subscribe and dispatch events across React components\n\n![npm](https://img.shields.io/npm/v/use-bus.svg) ![npm bundle size](https://img.shields.io/bundlephobia/minzip/use-bus.svg) ![CircleCI](https://img.shields.io/circleci/build/github/fabienjuif/use-bus.svg) ![Coveralls github](https://img.shields.io/coveralls/github/fabienjuif/use-bus.svg)\n\n\n# API\n## dispatch\n`import { dispatch } from 'use-bus'`:\n- `dispatch('string')`: will dispatch the action `{ type: 'string' }` without payload\n- `dispatch({ type: 'string', payload: 3 })`: will dispatch the given action\n\n## useBus\n`import useBus from 'use-bus'`:\n- `useBus(filter, callback, deps)`: register the given `callback` to the given `filter`\n  * `filter`: it can be a string, array of strings, RegExp or a function\n    - `string`: if filter is a string, then the action type is test over this given string, **if the filter match the type, the callback is called**\n    - `string[]`: **if the filter array includes the type, the callback is called**\n    - `RegExp`: **if the filter expression matches the type, the callback is called** \n    - `function`: **the callback is called if the function returns a truthy value**\n  * `callback`: take the action as the first argument so you can retrieve its type and its payload for example\n  * `deps`: is an array where you declare variables you use in `callback`, like you are doing for a useEffect from React\n\n# Example\n## register to an event (and react to it)\n```jsx\nimport React, { useState } from 'react'\nimport useBus from 'use-bus'\n\nconst PrintIterations = () =\u003e {\n  const [iterations, setIterations] = useState(0)\n\n  useBus(\n    '@@ui/ADD_ITERATION',\n    () =\u003e setIterations(iterations + 1),\n    [iterations],\n  )\n\n  return (\n    \u003cdiv\u003e\n      {'There is '}\n      {iterations}\n      {' iterations'}\n    \u003c/div\u003e\n  )\n}\n\nexport default PrintIterations\n```\n\n1. import the hook `useBus`\n2. register to an event name, here `@@ui/ADD_ITERATION`\n3. react to this, here an anonymous function that increment a number\n\n## dispatch an event\n```jsx\nimport React from 'react'\nimport { dispatch } from 'use-bus'\n\nconst IterateBtn = () =\u003e {\n  return (\n    \u003cbutton onClick={() =\u003e dispatch('@@ui/ADD_ITERATION')}\u003e\n      Iterate\n    \u003c/button\u003e\n  )\n}\n\nexport default IterateBtn\n```\n\n1. import `dispatch` and call it with the event you want to send\n\n## Connect the dispatcher and the reaction\n```jsx\nimport React from 'react'\nimport PrintIterations from './printIterations'\nimport IterateBtn from './iterateBtn'\n\nconst App = () =\u003e {\n  return (\n    \u003cdiv\u003e\n      \u003cPrintIterations /\u003e\n      \u003cIterateBtn /\u003e\n    \u003c/div\u003e\n  )\n}\n\nexport default App\n```\n\nThere is no connection to do, this is already done by `use-bus`.\n\nThis example just demonstrate that siblings can interact, but you can imagine a dispatcher wherever you want in the React tree and something that react to the dispatch wherever you want to.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffabienjuif%2Fuse-bus","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ffabienjuif%2Fuse-bus","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ffabienjuif%2Fuse-bus/lists"}