Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

use-bus

Package Overview
Dependencies
Maintainers
1
Versions
13
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

use-bus

> React hook to subscribe and dispatch events across React components

  • 2.5.2
  • latest
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
4.4K
increased by25.53%
Maintainers
1
Weekly downloads
 
Created
Source

use-bus

React hook to subscribe and dispatch events across 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, 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)

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.

Keywords

FAQs

Package last updated on 15 Sep 2022

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc