react-tiny-contextmenu

A super tiny, fully typed, zero dependency context menu.

API:

target : React.refObject<HtmlElement> A React ref to attach the context menu to.

items : React.ComponentWithoutRef<'span'>[] A list of objects representing the context menu's options. Accepts all props that a span would.

children : React.ReactNode Instead of passing in a list of items, roll your own content. Takes priority over items.

className : string ClassNames to be applied to the context menu's container element.

itemClassName : string ClassNames to be applied to each item element. Applied before any classNames provided per-item.

Usage:

import { ContextMenu } from 'react-tiny-contextmenu'

const contextMenuContainerRef = React.useRef(null)
const items = [
  {
    children: 'One Button',
  },
  {
    children: (
      <div>
        <button>two</button>
        <button>button</button>
      </div>
    ),
  },
  {
    children: 'Red Button',
    className: 'red-button'
  },
  {
    children: 'Blue Button',
    style: { background: 'blue' }
  },
]

...

<span ref={contextMenuContainerRef}>right click me!</span>
<ContextMenu target={contextMenuContainerRef} items={items} />