ryansworld84 / native-menu

ReactJS context menu component, that doesn't break native browser actions

native-menu

A lightweight React context menu component, that doesn't break existing browser functionality.

Demo  | CodeSandbox  | NPM

Table of Contents

• Install
• Usage
• Props

Install

NPM

npm i -S native-menu

Yarn

yarn add native-menu

Usage

Basic example

CodeSandbox

import NativeMenu from 'native-menu'

<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 }]

Example

<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

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

Example

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

Specifies the visual theme to use. Defaults to native

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

Example

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

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

styles?: JSS

Example

<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

hide?: NativeItems[]

Hides 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'

Example

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

mimic?: boolean

Example

<NativeMenu
  mimic
>
  Click me
</NativeMenu>

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

minimal?: boolean

Example

<NativeMenu
  minimal
>
  Click me
</NativeMenu>

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

nativeClick?: Function

Example

<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()