Ninety-nine Pitchers of Malt

    TypeScript icon, indicating that this package has built-in type declarations

    2.5.2 • Public • Published


    React hook to subscribe and dispatch events across React components

    npm npm bundle size CircleCI Coveralls github



    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


    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


    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)
        () => setIterations(iterations + 1),
      return (
          {'There is '}
          {' 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

    import React from 'react'
    import { dispatch } from 'use-bus'
    const IterateBtn = () => {
      return (
        <button onClick={() => dispatch('@@ui/ADD_ITERATION')}>
    export default IterateBtn
    1. 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 (
          <PrintIterations />
          <IterateBtn />
    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.


    npm i use-bus

    DownloadsWeekly Downloads






    Unpacked Size

    18.7 kB

    Total Files


    Last publish


    • fabienjuif