react-outside-component

React component for handling outside clicks. Inspired by reactstrap.

Installation

yarn add react-outside-component

Api

Properties

OutsideComponent.propTypes = {
    tag: PropTypes.string, // default 'div'
    isOpen: PropTypes.bool, // default true
    children: PropTypes.node,
    onClickOutside: PropTypes.func.isRequired,
};

Example

import React, { Component } from 'react';
import Outside from 'react-outside-component';

export default class CustomDropdown extends Component {
    
    constructor(props) {
        super(props);
        
        this.handleOutsideClick = this.handleOutsideClick.bind(this);
    }
    
    handleOutsideClick(e) {
        // ...
    }
    
    render() {
        return (
            <Outside tag="ul" className="dropdown-menu" onClickOutside={this.handleOutsideClick}>
                <li>Items..</li>
            </Outside>
        );
    }
}

License

MIT