react-click-outside-wrapper

A react wrapper component to detect and trigger a callback once clicked outside it's children.

Demo

https://react-click-outside-wrapper.netlify.app/

Install

Using npm:

npm i react-click-outside-wrapper

Usage

Import with ES6 modules:

import ClickOutsideWrapper from "react-click-outside-wrapper";

Example usage:

function App() {
  return (
    <div className="app">
      <ClickOutsideWrapper onClickOutside={() => alert("You clicked outside!")}>
        <div className="item">
          <p>Click outside me!</p>
        </div>
      </ClickOutsideWrapper>
    </div>
  );
}

Props

| Name | Value | Description | | -------------- | :--------: | ------------------------------------------------------: | | onClickOutside | function | Callback triggered on every click outside the component |

License

MIT