useOnClickOutside

Custom hook to manage click events triggered outside the provided elements

Clicked inside

Usage

import { useOnClickOutside } from "reshaped";

While Reshaped includes utilities like Popover and DropdownMenu, there might be cases where you need to build a custom component that closes when the user clicks outside of it. The useOnClickOutside hook lets you detect clicks outside specified elements and run your own logic in response. You can pass multiple refs to the hook — it only triggers when the click happens outside all of them.

const [active, setActive] = useState(false);
const ref = useRef<HTMLDivElement>(null);

useOnClickOutside([ref], () => {
  setActive(true);
});

You can disable the hook with the disabled option:

useOnClickOutside([ref], () => {}, { disabled: true });

API

(
  refs: React.RefObject<HTMLElement>[],
  handler: () => void,
  options?: { disabled?: boolean }
)

useKeyboardMode

useResponsiveClientValue