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

3.0.0 • Public • Published

react-bus

npm bundlephobia

A global event emitter for React apps. Useful if you need some user interaction in one place trigger an action in another place on the page, such as scrolling a logging element when pressing PageUp/PageDown in an input element (without having to store scroll position in state).

Usage

react-bus contains a <Provider /> component and a useBus hook.

<Provider /> creates an event emitter and places it on the context. useBus() returns the event emitter from context.

import { Provider, useBus } from 'react-bus'
// Use `bus` in <Component />.
function ConnectedComponent () {
  const bus = useBus()
}

<Provider>
  <ConnectedComponent />
</Provider>

For example, to communicate "horizontally" between otherwise unrelated components:

import { Provider as BusProvider, useBus, useListener } from 'react-bus'
const App = () => (
  <BusProvider>
    <ScrollBox />
    <Input />
  </BusProvider>
)

function ScrollBox () {
  const el = React.useRef(null)
  const onscroll = React.useCallback(function (top) {
    el.current.scrollTop += top
  }, [])

  useListener('scroll', onscroll)

  return <div ref={el}></div>
}

// Scroll the ScrollBox when pageup/pagedown are pressed.
function Input () {
  const bus = useBus()
  return <input onKeyDown={onkeydown} />

  function onkeydown (event) {
    if (event.key === 'PageUp') bus.emit('scroll', -200)
    if (event.key === 'PageDown') bus.emit('scroll', +200)
  }
}

This may be easier to implement and understand than lifting the scroll state up into a global store.

Install

npm install react-bus

API

<Provider />

Create an event emitter that will be available to all deeply nested child elements using the useBus() hook.

const bus = useBus()

Return the event emitter.

useListener(name, fn)

Attach an event listener to the bus while this component is mounted. Adds the listener after mount, and removes it before unmount.

License

MIT

Package Sidebar

Install

npm i react-bus

Weekly Downloads

1,370

Version

3.0.0

License

MIT

Unpacked Size

10.2 kB

Total Files

11

Last publish

Collaborators

  • goto-bus-stop