@ihatecode/react-context-menu

Englist | 中文

Introduction

A context menu component written in React.

Install

# npm
npm install @ihatecode/react-context-menu
# yarn
yarn add @ihatecode/react-context-menu
# pnpm
pnpm add @ihatecode/react-context-menu

Usage

import React from 'react';
import ContextMenu from '@ihatecode/react-context-menu';
import '@ihatecode/react-context-menu/lib/style.css';

const App: React.FC = () => {
  const [contextMenu] = ContextMenu.useContextMenu();

  return (
    <div style={{ width:'100vw', height:'100vh'}}>
      <div style={{ width:'100%', height:'100%'}} onContextMenu={contextMenu.onContextMenu}></div>
        <ContextMenu
          contextMenu={contextMenu}
          items={[{ key:'1', label: 'item1' }, { key:'2', label: 'item2' }]}
          onClick={(key) => console.log(key)}
        />
    </div>
  );
};

export default App;

Demo

Online demo: https://q5fknh.csb.app/

Props

ContextMenu Props

|Property|Type|Optional |-|-|:-: |className|string|Y| |zIndex|number|Y| |contextMenu|object|N| |items|any|N| |onClick|(key: string) => void|Y|

ContextMenu Item Props

|Property|Type|Optional |-|-|:-: |key|string|N| |label|string|N| |icon|ReactNode|Y| |disabled|boolean|Y| |children|any|Y|

License

MIT