use-bus
v2.5.2
Published
> React hook to subscribe and dispatch events across React components
Downloads
22,032
Maintainers
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 payloaddispatch({ type: 'string', payload: 3 })
: will dispatch the given action
useBus
import useBus from 'use-bus'
:
useBus(filter, callback, deps)
: register the givencallback
to the givenfilter
filter
: it can be a string, array of strings, RegExp or a functionstring
: if filter is a string, then the action type is test over this given string, if the filter match the type, the callback is calledstring[]
: if the filter array includes the type, the callback is calledRegExp
: if the filter expression matches the type, the callback is calledfunction
: 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 exampledeps
: is an array where you declare variables you use incallback
, like you are doing for a useEffect from React
Example
register to an event (and react to it)
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 (
<div>
{'There is '}
{iterations}
{' iterations'}
</div>
)
}
export default PrintIterations
- import the hook
useBus
- register to an event name, here
@@ui/ADD_ITERATION
- react to this, here an anonymous function that increment a number
dispatch an event
import React from 'react'
import { dispatch } from 'use-bus'
const IterateBtn = () => {
return (
<button onClick={() => dispatch('@@ui/ADD_ITERATION')}>
Iterate
</button>
)
}
export default IterateBtn
- import
dispatch
and call it with the event you want to send
Connect the dispatcher and the reaction
import React from 'react'
import PrintIterations from './printIterations'
import IterateBtn from './iterateBtn'
const App = () => {
return (
<div>
<PrintIterations />
<IterateBtn />
</div>
)
}
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.