@siamf/context-menu

React hook and components for displaying fully UI controlled context menu.

This project is fork of use-context-menu with react 19 support.

Installation

$ npm i @siamf/context-menu

Usage

ImageUpload

"use client"
import { ContextMenuItem, useContextMenu } from "@siamf/context-menu";
import "@siamf/context-menu/styles.css";

const Page = ({ className }: { className: string }) => {
  const { contextMenu, onContextMenu, onKeyDown } = useContextMenu(
    <>
      <ContextMenuItem onSelect={selectOne}>One</ContextMenuItem>
      <ContextMenuItem onSelect={selectTwo}>Two</ContextMenuItem>
      <ContextMenuItem onSelect={selectThree}>Three</ContextMenuItem>
    </>
  );

  return (
    <>
      <button onContextMenu={onContextMenu} onKeyDown={onKeyDown} tabIndex={0}>
        right-click me
      </button>
      {contextMenu}
    </>
  );
}

export default Page;

Stay in touch

• Author - Siam Ahnaf
• Website - https://www.siamahnaf.com/
• LinkedIn - https://www.linkedin.com/in/siamahnaf/
• Github - https://github.com/siamahnaf