# API

The module exports the following:

- `ContextMenu`
- `ContextMenuTrigger`
- `MenuItem`
- `SubMenu`

### `<ContextMenu />`
Base Contextmenu Component.

#### PropTypes

| Property                 | Type     | Required? | Description                                                      |
|--------------------------|----------|-----------|------------------------------------------------------------------|
| id                       | String   | ✓         | A unique identifier for a menu.                                  |
| hideOnLeave              | Boolean  |           | Hides the context menu on mouse leave.                           |
| onMouseLeave             | Function |           | Callback called when the mouse leaves the menu or submenu areas. |
| onHide                   | Function |           | Callback called when the menu is hidden.                         |
| onShow                   | Function |           | Callback called when the menu is shown.                          |
| preventHideOnContextMenu | Boolean  |           | Prevents hiding of the context menu on contextMenu event.        | 
| preventHideOnResize      | Boolean  |           | Prevents hiding of the context menu on resize event.             |
| preventHideOnScroll      | Boolean  |           | Prevents hiding of the context menu on scroll event.             |
| className                | String   |           | Custom `className` applied to root element of the context-menu.  |

### `<ContextMenuTrigger />`

Contextmenu Trigger Component

#### PropTypes

| Property                | Type                    | Required? | Default | Description                                                                                                                                                                                                                                     |
|-------------------------|-------------------------|-----------|---------|-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| id                      | String                  | ✓         |         | The unique identifier of the menu to be called.                                                                                                                                                                                                 |
| attributes              | Object                  |           |         | The attributes will be passed directly passed to the root element of component. Use this to customize it like adding custom classes, adding `colspan` etc.                                                                                      |
| collect                 | Function                |           |         | A simple function which takes `props` as input and returns the data to be passed to contextmenu.                                                                                                                                                  |
| disable                 | Boolean                 |           | `false` | Prop to ignore right clicks and display the default browser context menu.                                                                                                                                                                       |
| holdToDisplay           | Number                  |           | `1000`  | This is applicable only for touch screens. The time (in ms) for which, user has to hold down his/her finger before the menu is shown.  **Note:** To disable the long press trigger on left-click just set a negative holdToDisplay value such as `-1` |
| renderTag               | String or React Element |           |         | The element inside which the Component must be wrapped. By default `div` is used. But this prop can used to customize it.                                                                                                                         |
| disableIfShiftIsPressed | Boolean                 |           | `false` | If true and shift is pressed, it will open the native browser context menu and ignore this custom component |

### `<MenuItem />`

A Simple Component for menu items.

#### PropTypes

| Property     | Type     | Required? | Default | Description                                                                                                                                                                                                                                                                |
|--------------|----------|-----------|---------|----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
| onClick      | Function | ✓         |         | The function to be called on click of item. The function will receive three parameters. The first is `event` object. The second is the merged data passed using `props.data` and collect from `ContextMenuTrigger`. The third is the element on which right-click occured. |
| data         | Object   |           | `{}`    | The extra data (if required) to be passed to `onClick` event.                                                                                                                                                                                                              |
| disabled     | Boolean  |           | `false` | If `true`, disables the click event and adds `.disabled` class.                                                                                                                                                                                                            |
| preventClose | Boolean  |           | `false` | By default, the context menu is closed as soon as an item is clicked. Set this prop to control this behavior.                                                                                                                                                              |
| attributes   | Object   |           |         | The attributes will be passed directly passed to the root element of `MenuItem`. Use this to customize it like adding custom classes (`className`, `disabledClassName`, `dividerClassName` and `selectedClassName`), etc.                                                                                                                                 |
| selected     | boolean  |           | `false` | **Internal Prop**: will be set from the surrounded context `ContextMenu` or `SubMenu`. If set to `true` the css class `react-contextmenu-item--selected` will be added to associated element.                                                                         |
| onMouseMove  | Function |           |         | **Internal Prop**: will be directly passed to associated element, so the surrounded context `ContextMenu` or `SubMenu` can handle the interactions to pass the correct `selected` state. Also the surrounded context can store the current selected `MenuItem`.    |
| onMouseLeave | Function |           |         | **Internal Prop**: will be directly passed to associated element, so the surrounded context `ContextMenu` or `SubMenu` can handle the interactions to pass the correct `selected` state. Also the surrounded context can store the current selected `MenuItem`.    |

### `<SubMenu />`

A component for using submenus within the contextmenu.

#### PropTypes

| Property    | Type     | Required? | Default | Description                                                                 |
|-------------|----------|-----------|---------|-----------------------------------------------------------------------------|
| title       | String   | ✓         |         | The content to be displayed in parent menu.                                 |
| disabled    | Boolean  |           | `false` | If `true`, disables the menu from opening and adds `.disabled` class.       |
| hoverDelay  | Number   |           | `500`   | The time (in ms) after which the menu is to be displayed when hovered upon. |
| className   | String   |           |         | Custom `className` applied to root element of the context-menu.             |
| attributes  | Object   |           |         | The attributes will be passed directly passed to the root element of `SubMenu`. Use this to customize it like adding custom classes (`className`, `disabledClassName`, `visibleClassName`, `selectedClassName` and `listClassName`), etc.    |
| selected    | boolean  |           | `false` | **Internal Prop**: will be set from the surrounded context `ContextMenu` or `SubMenu`. If set to `true` the css class `react-contextmenu-item--selected` will be added to associated element.           |
| onClick      | Function |          |         | The function to be called on click of `SubMenu`. The function will receive three parameters. The first is `event` object. The second is the merged data passed using `props.data` and collect from `ContextMenuTrigger`. The third is the element on which right-click occured. |
| onMouseMove | Function |           |         | **Internal Prop**: will be directly passed to associated element, so the surrounded context `ContextMenu` or `SubMenu` can handle the interactions to pass the correct `selected` state. Also the surrounded context can store the current selected `SubMenu` entry.    |
| onMouseOut  | Function |           |         | **Internal Prop**: will be directly passed to associated element, so the surrounded context `ContextMenu` or `SubMenu` can handle the interactions to pass the correct `selected` state. Also the surrounded context can store the current selected `SubMenu` entry.    |
| preventCloseOnClick | Boolean  |           | `false` | Prevent the context-menu to close when clicking on this `SubMenu`. |
| forceOpen   | boolean  |           | `false` | **Internal Prop**: if the user hits enter or the right arrow key on a selected `SubMenu` entry, the surrounded context will pass `true` to this flag. The `SubMenu` stays open until this flag is `false`.    |
| forceClose  | Function |           |         | **Internal Prop**: if the user hits the escape key during an open `SubMenu`, this function will be called to indicate the surrounding context to reset the `forceOpen` flag.    |
| parentKeyNavigationHandler | Function |           |         | **Internal Prop**: the `keydown` handler from the surrounding context will be passed to every open `SubMenu`. Then the `Submenu` will unregister the referenced handler and use it's own for key control. When the `SubMenu` hides again the original handler will be restored.    |