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