Context menu
A right-click action menu with a keyboard entry point, grouped items, shortcuts, and viewport clamping.
Implementation
1"use client";2 3import { useEffect, useId, useRef, useState, type ReactNode } from "react";4import { createPortal } from "react-dom";5 6export type ContextMenuAction = {7 id: string;8 label: string;9 shortcut?: string;10 disabled?: boolean;11 danger?: boolean;12 icon?: ReactNode;13};14 15export type ContextMenuEntry =16 ContextMenuAction | { type: "label"; label: string } | { type: "separator" };17 18export type ContextMenuProps = {19 children: ReactNode;20 items: ContextMenuEntry[];21 label?: string;22 disabled?: boolean;23 onSelect?: (id: string) => void;24 className?: string;25};26 27function isAction(entry: ContextMenuEntry): entry is ContextMenuAction {28 return !("type" in entry);