Have ideas to improve npm?Join in the discussion! »

    native-menu

    1.4.1 • Public • Published

    native-menu

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

    Demo  | CodeSandbox  | NPM

    Table of Contents

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

    Install

    npm i native-menu

    DownloadsWeekly Downloads

    26

    Version

    1.4.1

    License

    none

    Unpacked Size

    190 kB

    Total Files

    6

    Last publish

    Collaborators

    • avatar