React event emitter / pubsub
A react wrapper for the awesome mitt library
Live demo https://codesandbox.io/s/react-mitt-demo-n11ii
$ npm install react-mittWrap your app in the MittProvider component, providing descendants access to the useMitt hook for event pubsub
import { MittProvider } from "react-mitt"
function App() {
return (
<MittProvider>
<ComponentA />
<ComponentB />
</MittProvider>
)
}Once you wrap your app with the MittProvider as demonstrated above, event pubsub becomes a breeze with the useMitt hook
import { useMitt } from 'react-mitt'
function ComponentA() {
const { emitter } = useMitt()
const handleClick = () => {
emitter.emit('foo', { data: 'ComponentA says foo!'})
}
return <button onClick={handleClick}>emit!</button>
}
function ComponentB() {
const { emitter } = useMitt()
useEffect(() => {
// listen and respond to 'foo' events
emitter.on('foo', event => alert(event.data))
}, [])
return ...
}The useMitt hook has the following signature
const { emitter } = useMitt()For usage of the emitter object, see mitt API docs
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent