gajus / React Outside Event
Licence: other
A higher order React component that attaches an event listener for events that occur outside of the component element.
Stars: ✭ 44
Programming Languages
javascript
184084 projects - #8 most used programming language
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 {ReactClass} Target The component that defines `onOutsideEvent` handler.
* @param {String[]} supportedEvents A list of valid DOM event names. Default: ['mousedown'].
* @return {ReactClass}
*/
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.
import React from 'react';
import ReactDOM from 'react-dom';
import ReactOutsideEvent from 'react-outside-event';
class Player extends React.Component {
onOutsideEvent = (event) => {
// Handle the event.
}
render () {
return <div>Hello, World!</div>;
}
}
export default ReactOutsideEvent(Player, ['click']);
You can attach multiple event listeners at once and selectively handle events with a simple conditional logic, e.g.
import React from 'react';
import ReactDOM from 'react-dom';
import ReactOutsideEvent from 'react-outside-event';
class Player extends React.Component {
onOutsideEvent = (event) => {
if (event.type === 'mousedown') {
} else if (event.type === 'mouseup') {
}
}
render () {
return <div>Hello, World!</div>;
}
}
export default ReactOutsideEvent(Player, ['mousedown', 'mouseup']);
Lint, Test, Build
npm run lint
npm run test
npm run build
Running the example
npm run build
npm run start
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].