react-bus
A global event emitter for react.
Last updated a year ago by goto-bus-stop .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install react-bus 
SYNC missed versions from official npm registry.

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

Current Tags

  • 2.0.1                                ...           latest (a year ago)

5 Versions

  • 2.0.1                                ...           a year ago
  • 2.0.0                                ...           a year ago
  • 1.0.3                                ...           2 years ago
  • 1.0.2                                ...           3 years ago
  • 1.0.1                                ...           3 years ago
Maintainers (1)
Downloads
Today 0
This Week 1
This Month 1
Last Day 0
Last Week 0
Last Month 3
Dependencies (1)
Dev Dependencies (5)

Copyright 2014 - 2017 © taobao.org |