# react-ultimate-contextmenu

> Replace context menu in react-app as you wish

Latest version **1.0.1** (published 2019-03-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-ultimate-contextmenu
pnpm add react-ultimate-contextmenu
yarn add react-ultimate-contextmenu
bun add react-ultimate-contextmenu
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.1 |
| Published | 2019-03-17 |
| First published | 2019-03-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 5 |
| Unpacked size | 59.4 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | bashkos |
| Maintainers | bashkos |

## Links

- npm: https://www.npmjs.com/package/react-ultimate-contextmenu
- Repository: https://github.com/bashkos/react-ultimate-contextmenu
- Homepage: https://github.com/bashkos/react-ultimate-contextmenu#readme
- Issues: https://github.com/bashkos/react-ultimate-contextmenu/issues
- npm.io page: https://npm.io/package/react-ultimate-contextmenu

## Dependencies (5)

- [prop-types](https://npm.io/package/prop-types.md) ^15.7.2
- [react-icons](https://npm.io/package/react-icons.md) ^3.5.0
- [@emotion/core](https://npm.io/package/@emotion/core.md) ^10.0.7
- [@emotion/styled](https://npm.io/package/@emotion/styled.md) ^10.0.7
- [react-custom-scrollbars](https://npm.io/package/react-custom-scrollbars.md) ^4.2.1

## Recent versions

- 1.0.1 (latest) — 2019-03-17
- 1.0.0 — 2019-03-17

## README

# react-ultimate-contextmenu
React-component allows you to replace the browser context menu with your own

[Demo](https://bashkos.github.io/examples/react-ultimate-contextmenu/)
([See code](https://github.com/bashkos/react-ultimate-contextmenu/tree/master/example))

## Installation
By npm
```console
$ npm install react-ultimate-contextmenu
```
By Yarn
```console
$ yarn add react-ultimate-contextmenu
```

## Usage
This simple example demonstrate different cases:
```jsx
import React, { Fragment } from 'react'
import { FaPhoneSquare } from 'react-icons/fa'
import {
  MenuProvider,
  Menu,
  MenuItem,
  Submenu,
  MenuFilter,
  Separator
} from 'react-ultimate-contextmenu'

const MyAwesomeComponent = ({ doSomethingAwesome, supportList, callSupport }) =>
<MenuProvider>
  This is my awesome component
  <Menu>
    <MenuItem href='https://my-awesome-site.com' target='_blank'>Go to my awesome site!<MenuItem>
    <MenuItem onClick={doSomethingAwesome}>Do something awesome!<MenuItem>
    {supportList.length && <Fragment>
      <Separator />
      <Submenu icon={<FaPhoneSquare />} label='Support...'>
        <MenuFilter available={supportList.length > 10}></MenuFilter>
        {supportList.map((item, index) =>
          <MenuItem key={index} onClick={() => { callSupport(index) }}>
            Call support {index + 1}
          </MenuItem>
        )}
      </Submenu>
    </Fragment>}
  </Menu>
</MenuProvider>

export default MyAwesomeComponent
```

### MenuProvider
This component define a context menu swap scope. It catches the `contextmenu` event and displays the child **Menu** component.

### Menu
This is the main container for context menu elements.

### MenuItem
Single menu item like button or link. By default this is button, but if you define prop `href` it will be a link and you can define all available link's props.

#### Properties:

* **leftIcon** - (react-element) icon to the left of the label
* **rightIcon** - (react-element) icon to the right of the label
* **disabled** - (boolean) disabled state
* **href** - (string) link address
* **target** - (string) target specifies where to open the link
* **onClick** - (function) handler of `click` event

### Submenu
Container for submenu elements.

#### Properties:

* **icon** - (react-element) icon to the left of the label of the parent submenu item
* **label** - (string) label of the parent submenu item
* **disabled** - (boolean) disabled state of parent submenu item

### MenuFilter:
Filter of menu items

#### Properties:

* **available** - (boolean) filter availability flag

### Separator
Dividing line between menu items.

[![JavaScript Style Guide](https://cdn.rawgit.com/standard/standard/master/badge.svg)](https://github.com/standard/standard)

---
_Source: https://npm.io/package/react-ultimate-contextmenu · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._