Menu

Usage

import { useRef, useState } from "react";
import Menu from "@repo/ui/Menu";
import Checkbox from "@repo/ui/Checkbox";
import Button from "@repo/ui/Button";

const [open, setOpen] = useState(false);
const anchor = useRef<HTMLButtonElement>(null);

<Button ref={anchor} onClick={() => setOpen((prev) => !prev)}>
  کلیک کن
</Button>

<Menu anchor={anchorRef.current} open={menuOpen} onClose={handleCloseMenu}>
  <Menu.Item className="vazirmatn">
    <Checkbox />
    گزینه اول
  </Menu.Item>
  <Menu.Item className="vazirmatn">
    <Checkbox />
    گزینه دوم
  </Menu.Item>
  <Menu.Item className="vazirmatn">
    <Checkbox />
    گزینه سوم
  </Menu.Item>
</Menu>

Installation

npx the-dig@latest add Menu

Props

Menu is controlled through open, anchor, and onClose; it positions a portal below the anchor and closes on outside click. Menu.Item accepts native HTMLAttributes<HTMLDivElement>. The example variables must be consistent (anchor, open, and a defined close handler).

Menu

Prop	Type	Default
anchor *	HTMLElement | null	-
open *	boolean	-
onClose *	VoidFunction	-
className	string	-
children	ReactNode	-