Hooks

Cherry exports utility hooks alongside its components.

useOnClickOutside

Calls a callback when a click lands outside all of the given elements. Useful for dismissing menus, popovers, and other floating UI. Cherry's own Modal uses it to close on outside clicks.

useOnClickOutside(refs: RefObject<HTMLElement | null>[], cb: () => void): void

"use client";
import React, { useRef, useState } from "react";
import { useOnClickOutside, Button } from "cherry-styled-components";

export default function Menu() {
  const [open, setOpen] = useState(false);
  const menuRef = useRef(null);
  const buttonRef = useRef(null);

  useOnClickOutside([menuRef, buttonRef], () => setOpen(false));

  return (
    <>
      <Button ref={buttonRef} onClick={() => setOpen(!open)}>
        Menu
      </Button>
      {open && <div ref={menuRef}>...</div>}
    </>
  );
}

Behavior details:

• Listens for mousedown on the document and fires the callback when the click target is inside none of the passed refs.
• Unattached refs (with a null current value) are ignored: a click counts as outside unless it lands inside a currently mounted ref target.
• The document listener is subscribed once per mount. You can safely pass inline arrays and inline callbacks; the hook keeps the latest values in a ref instead of re-subscribing on every render.

Properties