Documentation
useClickOutside
Detect clicks outside an element for closing dropdowns and modals.
Installation
pnpm add @rouf-dev/pantheon-uiUsage
"use client";
import { useClickOutside } from "@rouf-dev/pantheon-ui";
import { useRef, useState } from "react";
export function DropdownDemo() {
const [isOpen, setIsOpen] = useState(false);
const ref = useRef(null);
useClickOutside(ref, () => setIsOpen(false));
return (
<div ref={ref}>
<button onClick={() => setIsOpen(!isOpen)}>Toggle</button>
{isOpen && <div>Dropdown content</div>}
</div>
);
}Parameters
ref: React ref object for the target element
handler: Callback function executed on outside click