React Outside Event
A higher order React component that attaches an event listener for events that occur outside of the component element.
All DOM events that bubble are supported. By default, only "mousedown" event listener is attached. See supportedEvents
parameter of the ReactOutsideEvent
function.
Examples
- Refer to the ./examples directory.
- Example JSBin.
Configuration
/** * @param * @param * @return */
Usage
Define a component class and wrap it using ReactOutsideEvent
. Your class must define onOutsideEvent
method that will be invoked when an outside event occurs, e.g.
;;; Component { // Handle the event. } { return <div>Hello World!</div>; } Player 'click';
You can attach multiple event listeners at once and selectively handle events with a simple conditional logic, e.g.
;;; Component { if eventtype === 'mousedown' else if eventtype === 'mouseup' } { return <div>Hello World!</div>; } Player 'mousedown' 'mouseup';
Lint, Test, Build
npm run lintnpm run testnpm run build
Running the example
npm run buildnpm run start