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

    2.3.1 • Public • Published

    use-bus

    React hook to subscribe and dispatch events accros React components

    npm npm bundle size CircleCI Coveralls github

    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 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
        • 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)

    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
    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')}>
          Iterate
        </button>
      )
    }
     
    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 (
        <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.

    Install

    npm i use-bus

    DownloadsWeekly Downloads

    1,974

    Version

    2.3.1

    License

    MIT

    Unpacked Size

    15.6 kB

    Total Files

    10

    Last publish

    Collaborators

    • fabienjuif