useDismiss

Hooks

useDismiss

Dismisses on outside click or Escape, with a list of refs that do not count as outside.

Signature

useDismiss calls a handler on outside pointer presses and Escape. ignoreRefs lists elements excluded from outside presses. Include both the trigger and the panel to prevent trigger presses from dismissing the overlay.

SignatureTypeScript

function useDismiss(options: {
  enabled: boolean;
  /** Clicks inside any of these do not dismiss — include the trigger, not just the panel. */
  ignoreRefs: { current: HTMLElement | null }[];
  onDismiss: () => void;
}): void;

Usage

ExampleTSX

import { useRef, useState } from "react";
import { useDismiss } from "@solarius/onset";

function Menu() {
  const triggerRef = useRef<HTMLButtonElement>(null);
  const panelRef = useRef<HTMLDivElement>(null);
  const [open, setOpen] = useState(false);

  useDismiss({
    enabled: open,
    ignoreRefs: [triggerRef, panelRef],
    onDismiss: () => setOpen(false),
  });

  return (
    <>
      <button ref={triggerRef} onClick={() => setOpen((v) => !v)}>
        Open
      </button>
      {open ? <div ref={panelRef}>…</div> : null}
    </>
  );
}