react-hoc-outside-click

React HOC OutsideClick

Usage no npm install needed!

<script type="module">
  import reactHocOutsideClick from 'https://cdn.skypack.dev/react-hoc-outside-click';
</script>

README

React HOC OutsideClick

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

Latest Stable Version License NPM Downloads

How to use

  1. Import clickOutside component
  2. Wrap your main component with function the clickOutside
  3. 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;

Options:

Name Description Required
onClickOutside function that is called when a click happened outside of the component yes

License

MIT