@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