Context Menu

A menu that appears on right-click, displaying a list of actions relevant to the context.

import { ContextMenu } from '@kaynora/ui'
import { useRef } from 'react'

export default function () {
  const targetRef = useRef<HTMLDivElement>(null)

  return (
    <>
      <ContextMenu
        target={targetRef}
        items={[
          { label: 'Edit' },
          { label: 'Duplicate' },
          { label: 'Delete' },
        ]}
      />

      <div
        ref={targetRef}
        style={{
          padding: '40px',
          border: '1px dashed var(--gray-3)',
          borderRadius: 'var(--radius)',
          textAlign: 'center',
          width: '200px',
        }}
      >
        <T>Right-click here</T>
      </div>
    </>
  )
}

<ContextMenu />

{
  icon: ReactElement
  label: string
  items: ItemInterface[]
  onClick: (e: MouseEvent) => void
  href: string
  disabled: boolean
}[]

React.RefObject<HTMLElement>

's' | 'm' | 'l'

{
  root: HTMLDivElementProps
  popover: PopoverProps
}