React-hoc-outside-click NPM

React HOC OutsideClick

A Higher Order Component wrapper to provide click outside functionality to the components

How to use

Import clickOutside component
Wrap your main component with function the clickOutside
Provide an onClickOutside callback.

Example

import React from 'react';
/* Any component, which will be set onClickOutside */
import Modal from 'modal/Modal';
import clickOutside from 'react-hoc-outside-click';

class AnyComponent extends Component {
  state = {
    isOpened: false
  }

  handleClickOutside() {
    this.setState({ isOpened: false });
  },

  render() {
    const wrapClickDiv = clickOutside(Modal);
    return (
      <wrapClickDiv onClickOutside={this.handleClickOutside}>
        Any content
      </wrapClickDiv>
    )
  },
});

export default AnyComponent;