useOnClickOutside
Custom hook that handles clicks outside a specified element.
Custom hook that handles clicks outside a specified element.
Usage
import { useOnClickOutside } from "@tilt-legal/cubitt-components/utilities/hooks";
const containerRef = useRef(null);
useOnClickOutside([containerRef], () => {
// Handle clicks outside the container.
});API
Signature
declare function useOnClickOutside<T extends HTMLElement = HTMLElement>(ref: RefObject<T> | RefObject<T>[], handler: (event: MouseEvent | TouchEvent | FocusEvent) => void, eventType?: EventType, eventListenerOptions?: AddEventListenerOptions): void;Parameters
| Parameter | Type | Description | Default |
|---|---|---|---|
ref | `RefObject<T> | RefObject<T>[]` | The React ref object(s) representing the element(s) to watch for outside clicks. |
handler | `(event: MouseEvent | TouchEvent | FocusEvent) => void` |
[eventType] | EventType | The mouse event type to listen for (optional, default is 'mousedown'). | - |
[eventListenerOptions] | ?AddEventListenerOptions | The options object to be passed to the addEventListener method (optional). | - |
Return Value
| Value | Type | Description |
|---|---|---|
return | void | Value returned by the hook. |
useMediaQuery
Custom hook that tracks the state of a media query using the [`Match Media API`](https://developer.mozilla.org/en-US/docs/Web/API/Window/matchMedia).
useResizeObserver
Custom hook that observes the size of an element using the [`ResizeObserver API`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver).