Event-based development providing for React
yarn add react-eventbus-provider
Rendering Provider
import { EventBusProvider } from 'react-eventbus-provider'
...
/** Declare component and return provider in render */
return <EventBusProvider>{ children: ReactNode }</EventBusProvider>
Subscribe on event
import { useEffect } from 'react'
import { useEventBusProvided } from 'react-eventbus-provider'
const MyComponent = () => {
const bus = useEventBusProvided()
const handleMyBusEvent = (...args) => {
console.log(`handling custom bus event with `, args)
}
useEffect(() => {
bus.$on('onMyBusEvent', handleMyBusEvent)
return () => bus.$un('onMyBusEvent', handleMyBusEvent)
}, [bus])
return {/** something */}
}
Calling (emitting) events
import { useEventBusProvided } from 'react-eventbus-provider'
const MyComponent = () => {
const bus = useEventBusProvided()
return <div>
<button onClick={(e) => bus.$emit('onMyBusEvent', e)}></button>
</div>
}