React Outside

A higher order component for React for listening to clicks outside of the component. Supports classes and decorators.

Installation

  npm i react-outside

How to use

Config

/**
 * @param {Object} config Configuration for the events.
 * @return {Component} 
 */

Usage

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import clickOutside from 'react-outside';
 
@clickOutside(['mousedown']) // `click` is the default handler but you can set different event names
export default class DropdownMenu extends Component {
    handleClickOutside(e) {
        // Handle the event
    }
 
    render() {
        return (
            <ul className="dropdown-menu">
                <li>List items...</li>
            </ul>
        );
    }
}