import React from 'react';
import { ContextMenuTrigger, ContextMenu, ContextMenuItem } from 'rctx-contextmenu';

function App() {
  return (
    <div className="app">
      <ContextMenuTrigger
        id="my-context-menu-1"
      >
        <div className="box">
          Right Click On Me
        </div>
      </ContextMenuTrigger>

      <ContextMenu id="my-context-menu-1">
        <ContextMenuItem>Menu Item 1</ContextMenuItem>
        <ContextMenuItem>Menu Item 2</ContextMenuItem>
        <ContextMenuItem>Menu Item 3</ContextMenuItem>
        <ContextMenuItem>Menu Item 4</ContextMenuItem>
      </ContextMenu>
    </div>
  );
}

export default App;

<ContextMenu
  id="my-contextmenu"
  appendTo="body"
  animation="zoom"
  hideOnLeave={false}
  preventHideOnScroll={true}
  preventHideOnResize={true}
  attributes={{
    'aria-label': 'Some text',
    'aria-labelledby': 'Some text'
  }}
  className="my-context-menu"
  onMouseLeave={() => console.log('Mouse left')}
  onShow={() => console.log('I am visible!')}
  onHide={() => console.log('I am hidden!')}
/>

<ContextMenuItem
  disabled={true}
  preventClose={false}
  attributes={{
    'aria-label': 'Some text',
    'aria-labelledby': 'Some text'
  }}
  className="my-context-menu-item"
  onClick={() => console.log("I'm clicked!")}
/>

<ContextMenuTrigger
  id="my-contextmenu"
  disable={false}
  disableWhileShiftPressed={true}
  attributes={{
    'aria-label': 'Some text',
    'aria-labelledby': 'Some text'
  }}
  className="my-context-menu-trigger"
/>

<Submenu
  title="My submenu"
  attributes={{
    'aria-label': 'Some text',
    'aria-labelledby': 'Some text'
  }}
  className="my-context-menu-submenu"
/>