useClickOutside
Calls a callback on a click or touch outside the provided elements.
Calls a callback on a click or touch outside the provided elements.
Usage
'use client';
import { useRef, useState } from 'react';
import { useClickOutside } from '@prosazhin/pbcomponents';
function Example() {
const [open, setOpen] = useState(true);
const ref = useRef<HTMLDivElement>(null);
useClickOutside({ refs: [ref], callback: () => setOpen(false) });
return open ? <div ref={ref}>Menu</div> : null;
}Hook API
Parameters
| Parameter | Type / variants | Purpose | Default |
|---|---|---|---|
refs | RefObject<T | null>[] | Elements whose inside clicks do not trigger the callback. | — |
callback | (event?: MouseEvent | TouchEvent) => void | Runs on a click or touch outside every provided element. | — |
Returns
| Value | Type / variants | Purpose |
|---|---|---|
result | void | Returns nothing. |