ContextMenu

Right-click context menu using ConnectedOverlay (Floating UI). Supports focus trapping, global menu state (only one open at a time), and auto-close on click.

Import

import { ContextMenu } from 'reablocks';

ContextMenu Props

Also accepts ConnectedOverlay props (except open).

Basic Usage

<ContextMenu content={
  <Card>
    <List>
      <ListItem onClick={() => copy()}>Copy</ListItem>
      <ListItem onClick={() => paste()}>Paste</ListItem>
      <ListItem onClick={() => del()}>Delete</ListItem>
    </List>
  </Card>
}>
  <div>Right-click me</div>
</ContextMenu>

With Close Control

Content can be a render function receiving close and closeAll:

<ContextMenu content={({ close, closeAll }) => (
  <Card>
    <List>
      <ListItem onClick={() => { action(); close(); }}>Action</ListItem>
      <ListItem onClick={closeAll}>Close All Menus</ListItem>
    </List>
  </Card>
)}>
  <div>Right-click me</div>
</ContextMenu>

ContextMenuTheme Interface

interface ContextMenuTheme {
  enabled: string;  // Cursor style when enabled (cursor-context-menu)
}