DOM & Layout·loomora → useContextMenu

useContextMenu

A hook that returns trigger props for the target element and a portaled menu element. Open state is managed internally by default and can also be controlled from outside.

Interactive live playground

Interact with the hook state and inspect computed return values in real time.

Live

Right-click this areaContext menu opens at cursor coordinates

Controlled state: closed

Context Menu Controls

Last Action Takennone

How to call

Import directly from the Loomora root package in any React client component.

import { useContextMenu } from 'loomora'

export function ContextMenuExample() {
  const { triggerProps, menu } = useContextMenu({
    children: (close) => (
      <div className="grid min-w-44 gap-1 p-2">
        <button onClick={close}>Copy</button>
        <button onClick={close}>Delete</button>
      </div>
    ),
  })

  return (
    <>
      <div {...triggerProps}>Right-click inside this area</div>
      {menu}
    </>
  )
}

Return values & methods

API signatures and utilities returned by this hook.

5 methods

Method / Prop	Type	Description
triggerProps	{ onContextMenu: (e: MouseEvent) => void }	Event handler props to spread onto the right-click trigger element.
menu	ReactNode	The portaled context menu element positioned at the cursor coordinates.
open	boolean	Current boolean open state of the context menu.
openAt	(x: number, y: number) => void	Programmatically opens the menu at specific viewport x/y coordinates.
close	() => void	Closes the context menu.

← All hooks map Back to live example ↑