Skip to main content
Version: 5.7.2

useOutsideClick

About​

Outside click event (for a ref) as a React hook.

Installation​

npm install --save rooks

Importing the hook​

import { useOutsideClick } from "rooks";

Usage​

import { useOutsideClick } from "rooks";
import { useRef } from "react";

function App() {
const ref = useRef();
function myComponent() {
console.log("Clicked outside");
}
useOutsideClick(ref, myComponent);

return (
<div
className="App"
style={{ display: "flex", flexDirection: "column", alignItems: "center" }}
>
<h1>Rooks : useOutsideClick Example</h1>

<div
style={{
display: "flex",
flexDirection: "column",
alignItems: "center",
width: "100%",
backgroundColor: "lightblue"
}}
ref={ref}
>
<h2 className="inside">
This is inside
</h2>
</div>
</div>
);
}

Arguments​

ArgumentsTypeDescriptionDefault value
refReact.MutableRefObjectRef whose outside click needs to be listened to
handlerfunctionCallback to fire on outside click
whenbooleanA boolean which activates the hook only when it is true. Useful for conditionally enable the outside clicktrue

Returns​

No return value.

Codesandbox Example​

Basic usage​

Join Bhargav's discord server​

You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.