1.0.2 • Published 8 years ago
react-global-events v1.0.2
React Global Events
Broadcast SyntheticEvents
from any React component to any others which are subscribed to that event.
Installation
npm install --save react-global-events
Usage
The most common implementation is to have a single root component listen for events.
// RootComponent.js
import {listenFor} from 'react-global-events'
const Root = () => (
<div id="app-root" {...listenFor('mouseUp', 'mouseDown')}>
...
<MySubComponent />
</div>
)
Subcomponents may then subscribe to those events in componentDidMount
. They must then implement callback methods with the naming convention onGlobal<ReactEventName>
. Note that the <ReactEventName>
follows the camel-casing convetions of event names in React, not standard JS: onGlobalMouseDown
rather than onGlobalMousedown
.
// MySubComponent.js
import GlobalEvents from 'react-global-events'
const MySubComponent = React.createClass({
componentDidMount: function() {
GlobalEvents.subscribe(this, 'mouseDown', 'mouseUp')
},
componentWillUnmount: function() {
// Don't forget to clean up afterwards!
GlobalEvents.unsubscribe(this, 'mouseDown', 'mouseUp')
},
onGlobalMouseDown: function(e) {
// Handle global mousedown events here
},
onGlobalMouseUp: function(e) {
// Handle global mouseup events here
}
})
You can have multiple components listenFor
events, but they can't choose which subscribers to broadcast to. The events are still broadcast globally.