context-menu-react

context-menu-react

A lightweight React context menu component, that doesn't break existing browser functionality.
This is a maintenance of native-menu

Reference: https://github.com/samdenty99/native-menu

Table of Contents

- Install
- Usage
- Props

Install

$3

``sh
npm i -S context-menu-react
`

$3

`sh
yarn add context-menu-react
`




Usage

$3

CodeSandbox

` javascript
import NativeMenu from 'context-menu-react'

{
primary: 'Test 1',
secondary: 'Ctrl+B',
onClick: () => alert('Test 1')
},
{
primary: 'Test 2',
disabled: true
},
]}>

Right click me


`

Props

$3

Example

`js
items={[
primary: 'test',
onClick: () => {
alert('clicked')
}
]}
>
Click me

`

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




$3

Example

`js
theme="material-dark"
>
Click me

`

Specifies the visual theme to use. Defaults to native

$3

Example

`js
platform="mac"
>
Click me

`

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


$3

Example

`js
styles={{
root: {
backgroundColor: '#000',
},
primary: {
backgroundColor: 'red'
}
}}
>
Click me

`

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

$3

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

Example

`js
show={['save-as', 'print']}
>
Click me

`

$3

Example

`js
mimic
>
Click me

`

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

$3

Example

`js
minimal
>
Click me

`

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

$3

Example

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

`

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