react-mitt

React event emitter / pubsub

A react wrapper for the awesome mitt library

Live demo https://codesandbox.io/s/react-mitt-demo-n11ii

Install

1$ npm install react-mitt

Usage

Wrap your app in the MittProvider component, providing descendants access to the useMitt hook for event pubsub

1import { MittProvider } from "react-mitt"
2
3function App() {
4  return (
5    <MittProvider>
6      <ComponentA />
7      <ComponentB />
8    </MittProvider>
9  )
10}

Example

Once you wrap your app with the MittProvider as demonstrated above, event pubsub becomes a breeze with the useMitt hook

1import { useMitt } from 'react-mitt'
2
3function ComponentA() {
4  const { emitter } = useMitt()
5
6  const handleClick = () => {
7    emitter.emit('foo', { data: 'ComponentA says foo!'})
8  }
9
10  return <button onClick={handleClick}>emit!</button>
11}
12
13function ComponentB() {
14  const { emitter } = useMitt()
15
16  useEffect(() => {
17    // listen and respond to 'foo' events
18    emitter.on('foo', event => alert(event.data))
19  }, [])
20
21  return ...
22}
23

Hook

The useMitt hook has the following signature

1const { emitter } = useMitt()

For usage of the emitter object, see mitt API docs

License

MIT License