A global event emitter for react.

Downloads in past


4243.0.03 years ago7 years agoMinified + gzip package size for react-bus in KB


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


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

  <ConnectedComponent />

For example, to communicate "horizontally" between otherwise unrelated components:
import { Provider as BusProvider, useBus, useListener } from 'react-bus'
const App = () => (
    <ScrollBox />
    <Input />

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.


npm install react-bus


<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.