react-outsideClick-Handler

React Library for dealing with outside click of its container.

Usage/Examples

1import { useState } from "react";
2import "./App.css";
3import { OutsideClickHandler } from "outsideclick-handler-react";
4export default function App() {
5  const [count, setCount] = useState(0);
6
7  return (
8    <div className="App">
9      <div>
10        <OutsideClickHandler
11          onClickOutside={() => {
12            alert("You clicked outside of me!");
13            setCount((pre) => pre + 1);
14          }}
15        >
16          <div className="border-red">click outside of me, clicks {count}</div>
17        </OutsideClickHandler>
18      </div>
19    </div>
20  );
21}

Props

onOutsideClick:

This prop is required to access outside click callback otherwise it is just a div.

other Props

you can pass any other props, which you wish to pass/assign a div. Like you can pass className to style it, you can pass id/ref to assign it. I mean you can pass any attribute to this which you ever want to assign your div. As I said it is just a div but you need to pass onOutsideClick function for accessing callback.