react-outer

React component for handling outside clicks. Inspired by reactstrap.

Installation

yarn add react-outer

Api

Properties

Outer.propTypes = {
  tag: PropTypes.oneOfType([ // default Fragment
    PropTypes.string,
    PropTypes.symbol,
    PropTypes.element,
  ]),
  isOpen: PropTypes.bool, // default true
  children: PropTypes.node,
  onClickOutside: PropTypes.func.isRequired,
};

Example

import React, { Component } from 'react';
import Outside from 'react-outer';
 
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