React context menu

A lightweight and customizable React component for implementing context menus. It supports dynamic menu generation, flexible styling options, and both predefined and custom menu icons.

This makes it ideal for applications requiring dynamic right-click menus with full control over behavior and appearance.

Key build-in features

• ✅ Dynamic Menu items
• ✅ Predefined icons
• ✅ Custom icons
• ✅ Multiple context menu implementation.

📦 Installation

npm install react-menu-context

🚀 Usage

import {ContextProvider, ContextMenu}  from "react-menu-context";


const menuItems=[
  {
    label:'Cut',  
    onClick:()=>{console.log('delete')},
    iconType:'scissor',
  },
  {
    label:'Copy task',
    onClick:()=>{console.log('delete')},
    iconType:'copy',
  },
  {
    label:'Edit content',
    onClick:()=>{console.log('delete')},
    icon:<CustomIcon/>,
  },
  {
    label:'Move to trash',
    onClick:()=>{console.log('delete')},
    iconType:'delete',
    disabled:true
  }
]

function App() {
  return (
    <ContextProvider id={123} className='custom-styling-name'>
      <button>Right clik context action</button>
      <ContextMenu 
        menuItems={menuItems}
        className='custom-class-name'
        id={123}
      />
    <ContextProvider/>

  );
}

ContextProvider

A React component that wraps and manages the display logic of the context menu.

props

ContextMenu

A React component that displays a list of contextual menu options in response to right click.

props

MenuItem

A data structure that defines a specific menu displayed in the context menu interface.

Icons

[!NOTE] There are two type of icons in the context menu

1. built-in icons
2. custom icons

built-in icons

The built-in icons can be added to the menu item by providing a name to the iconType

{
  ...,
  lable:'Move to trash'
  iconType:'delete'
},
{
  ...,
  label:'Save data'
  iconType:'save'
}

custom icons

Custom icons can be provided to the context menu as either React components returning SVG elements or as <img> tags referencing image files

  const MenuIcon=()=>{
    return(
      <svg>
          <path> ... </path>
      </svg>
    )
  }

  const menuItems=[
    {
      label:'Custom icon menu',
      icon:<MenuIcon />,
      onClick:{()=>console.log()}
    },
    {
      label:'Custom image menu',
      icon:<img src='./image/source' />,
      onClick:{()=>console.log()}
    }
  ]