Documentation

useClickOutside

Detect clicks outside an element for closing dropdowns and modals.

Installation

pnpm add @rouf-dev/pantheon-ui

Usage

"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