Skip to main content
Version: Next

useOutsideClickRef

About​

A hook that can track a click event outside a ref. Returns a callbackRef.

Installation​

npm install --save rooks

Importing the hook​

import { useOutsideClickRef } from "rooks";

Usage​

function Demo() {
function outsidePClick() {
alert("Clicked outside p");
}
const [ref] = useOutsideClickRef(outsidePClick);
return (
<div>
<p ref={ref}>Click outside me</p>
</div>
);
}

render(<Demo />);

Arguments​

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

Returns​

Returned Array itemsTypeDescription
refCallbackRefref

Codesandbox Examples​

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.