Unleash awesomeness. Private packages, team management tools, and powerful integrations. Get started with npm Orgs »

react-outside-event

1.2.7 • Public • Published

React Outside Event

Travis build status NPM version Canonical Code Style

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

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

install

npm i react-outside-event

Downloadsweekly downloads

262

version

1.2.7

license

BSD-3-Clause

homepage

github.com

repository

Gitgithub

last publish

collaborators

  • avatar
Report a vulnerability