Table of Contents

• Install
• Usage
• Props

Install

NPM

npm i -S context-menu-react

Yarn

yarn add context-menu-react

Usage

Basic example

CodeSandbox

import NativeMenu from 'context-menu-react'

<NativeMenu items={[
  {
    primary: 'Test 1',
    secondary: 'Ctrl+B',
    onClick: () => alert('Test 1')
  },
  {
    primary: 'Test 2',
    disabled: true
  },
]}>
  <span>
    Right click me
  </span>
</NativeMenu>

Props

items?: [{ primary: Component, secondary?: Component, onClick?: Function, disabled?: boolean }]

<NativeMenu
  items={[
    primary: 'test',
    onClick: () => {
      alert('clicked')
    }
  ]}
>
  Click me
</NativeMenu>

An array containing custom menu items.

• primary - The name of the menu item. React components can be passed
• secondary - The secondary text associated with the item (eg. Keyboard shortcut). React components can be passed
• onClick - The callback for when the item is clicked
• disabled - Grey out and disable the menu item
• showSelection - Show selected text in context menu item

theme?: ('native' | 'native-dark' | 'material' | 'material-dark')

<NativeMenu
  theme="material-dark"
>
  Click me
</NativeMenu>

Specifies the visual theme to use. Defaults to native

platform?: ('windows' | 'edge' | 'chrome' | 'mac')

<NativeMenu
  platform="mac"
>
  Click me
</NativeMenu>

Only applicable with the native theme. Chooses the variant of context menu styles to us

styles?: JSS

<NativeMenu
  styles={{
    root: {
      backgroundColor: '#000',
    },
    primary: {
      backgroundColor: 'red'
    }
  }}
>
  Click me
</NativeMenu>

Overrides the styles for the context menu using the JSS format. JSS source code

show?: NativeItems[]

Shows specific native menu items. Native item names

'open-link'
'new-window'
'new-incognito-window'
'save-link'
'copy-link'
'copy-text'
'search-text'
'print'
'back'
'forward'
'reload'
'save-as'
'cast'
'translate'
'view-source'
'inspect'
'open-image'
'save-image'
'copy-image'
'copy-image-address'
'search-image'

<NativeMenu
  show={['save-as', 'print']}
>
  Click me
</NativeMenu>

mimic?: boolean

<NativeMenu
  mimic
>
  Click me
</NativeMenu>

Adds all of the missing context menu items present in Chrome, but without any functionality when clicked.

minimal?: boolean

<NativeMenu
  minimal
>
  Click me
</NativeMenu>

Hides non-essential menu items such as print, save-as, view-source etc.

nativeClick?: Function

<NativeMenu
  nativeClick={(e, action) => {
    e.preventDefault()
    alert(`${action} triggered`)
  }}
>
  Click me
</NativeMenu>

Callback for when native menu items are clicked. To prevent the default item action, call preventDefault()