ECorreia45/react-outside

🌀 ES7 class decorator or higher-order component for React for listening to clicks outside of the component.

React Outside

Wraps a react component and listens for clicks outside of the element.

Can be used as a higher-order component or as an ES7 class decorator

Installation

  npm i react-outside

API

clickOutside([config])(MyComponent)

Parameters

• config object
  • config.events array

Examples

// ES7
import React from 'react';
import clickOutside from 'react-outside';

@clickOutside() // Enhanced component
class MyComponent extends React.Component {
    handleClickOutside() {
        // Handle the event
    }
    render() {
        <ul className="dropdown-menu">
            <li>List items...</li>
        </ul>
    }
}

export default MyComponent; // Component is exported with `clickOutside` decorator

// ES5
var React = require('react');
var clickOutside = require('react-outside');

class MyComponent extends React.Component {
    handleClickOutside() {
        // Handle the event
    }
    render() {
        <ul className="dropdown-menu">
            <li>List items...</li>
        </ul>
    }
}

export default clickOutside()(MyComponent); // Enhanced component