https://github.com/fabienjuif/use-bus
React hook to subscribe and dispatch events accros React components
https://github.com/fabienjuif/use-bus
bus eventbus events hook hooks message messages react reactjs saumur
Last synced: 6 months ago
JSON representation
React hook to subscribe and dispatch events accros React components
- Host: GitHub
- URL: https://github.com/fabienjuif/use-bus
- Owner: fabienjuif
- License: mit
- Created: 2019-06-08T09:59:19.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-02-03T06:20:01.000Z (over 2 years ago)
- Last Synced: 2025-04-06T12:42:03.655Z (6 months ago)
- Topics: bus, eventbus, events, hook, hooks, message, messages, react, reactjs, saumur
- Language: JavaScript
- Homepage:
- Size: 1.09 MB
- Stars: 97
- Watchers: 3
- Forks: 15
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# use-bus
> React hook to subscribe and dispatch events across React components
   
# API
## dispatch
`import { dispatch } from 'use-bus'`:
- `dispatch('string')`: will dispatch the action `{ type: 'string' }` without payload
- `dispatch({ type: 'string', payload: 3 })`: will dispatch the given action
## useBus
`import useBus from 'use-bus'`:
- `useBus(filter, callback, deps)`: register the given `callback` to the given `filter`
* `filter`: it can be a string, array of strings, RegExp or a function
- `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**
- `string[]`: **if the filter array includes the type, the callback is called**
- `RegExp`: **if the filter expression matches the type, the callback is called**
- `function`: **the callback is called if the function returns a truthy value**
* `callback`: take the action as the first argument so you can retrieve its type and its payload for example
* `deps`: is an array where you declare variables you use in `callback`, like you are doing for a useEffect from React
# Example
## register to an event (and react to it)
```jsx
import React, { useState } from 'react'
import useBus from 'use-bus'
const PrintIterations = () => {
const [iterations, setIterations] = useState(0)
useBus(
'@@ui/ADD_ITERATION',
() => setIterations(iterations + 1),
[iterations],
)
return (
{'There is '}
{iterations}
{' iterations'}
)
}
export default PrintIterations
```
1. import the hook `useBus`
2. register to an event name, here `@@ui/ADD_ITERATION`
3. react to this, here an anonymous function that increment a number
## dispatch an event
```jsx
import React from 'react'
import { dispatch } from 'use-bus'
const IterateBtn = () => {
return (
dispatch('@@ui/ADD_ITERATION')}>
Iterate
)
}
export default IterateBtn
```
1. import `dispatch` and call it with the event you want to send
## Connect the dispatcher and the reaction
```jsx
import React from 'react'
import PrintIterations from './printIterations'
import IterateBtn from './iterateBtn'
const App = () => {
return (
)
}
export default App
```
There is no connection to do, this is already done by `use-bus`.
This 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.