Gives people access to additional functionality related to onscreen items without cluttering the interface.
You should have the chayns-components package installed. If that is not the
case already, run
yarn add chayns-componentsor
npm i chayns-componentsAfter the chayns-components package is installed, you can import the component
and use it with React:
import React from 'react'
import { ContextMenu } from 'chayns-components';
// ...
<ContextMenu {...} />To open or close the context menu imperatively, call the show() and hide()
on its reference.
The ContextMenu-component takes the following props:
| Name | Type | Default | Required |
|---|---|---|---|
| onLayerClick | function |
||
| onShow | function |
||
| onHide | function |
||
| coordinates | { x: number, y: number } |
||
| items | Array<{ className: string, onClick: function, text: string | ReactNode, stringName: string, icon: string | Object }> |
[] |
|
| position | number |
||
| positionOnChildren | number |
1 |
|
| parent | custom |
||
| children | ReactNode |
<Icon icon="ts-ellipsis_v" /> |
|
| onChildrenClick | function |
||
| childrenStyle | { [key: string]: string | number } |
||
| childrenClassName | string |
||
| stopPropagation | boolean |
false |
|
| minWidth | number |
||
| maxWidth | number |
||
| showTriggerBackground | boolean |
false |
|
| className | string |
||
| style | object |
||
| removeParentSpace | boolean |
false |
|
| disableDialog | boolean |
false |
|
| arrowDistance | number |
0 |
onLayerClick?: functionThis callback will be called when the ContextMenu is shown and the user clicks
away from it.
onShow?: functionThis callback will be called when the context menu becomes visible
onHide?: functionThis callback will be called when the ContextMenu hides
coordinates?: { x: number, y: number }The coordinates at which the context menu will get rendered.
items?: Array<{ className: string, onClick: function, text: string | ReactNode, stringName: string, icon: string | Object }>The action items inside of the context menu. Their shape should look like this:
{ className: <string>, onClick: <function>, text: <string>, icon: <string> }, stringName: <string>.
position?: numberThis specifies where the menu will appear relative to the components provided in
the children-prop. Possible values are: 0 for top left, 1 for bottom left,
2 for bottom right, 3 for top right, 4 for top center and 5 for bottom
center.
positionOnChildren?: numberThe position of the arrow relative to the children. Possible values are 0 for
left, 1 for center and 2 for right.
parent?: customSpecifies the DOM node the context menu will be rendered into.
children?: ReactNodeThe React node that the context menu refers to.
onChildrenClick?: functionCalled when the onclick-event is triggered on the children.
childrenStyle?: { [key: string]: string | number }A React style object that will be applied to the children wrapper.
childrenClassName?: stringA classname string that will be applied to the children wrapper.
stopPropagation?: booleanWether to stop propagation of click events on the children elements.
minWidth?: numberThe minimum width of the context menu.
maxWidth?: numberThe maximum width of the context menu.
showTriggerBackground?: booleanAdds a white background to the children wrapper, for when it would otherwise be difficult to view (e.g. on images or video).
className?: stringA classname string applied to the Bubble component.
style?: objectA React style object that is applied to the Bubble component.
removeParentSpace?: booleanRemoves the parent padding to the page borders from the context menu position. This is needed when the parent is padded and relatively positioned.
disableDialog?: booleanDisables the use of a dialog on mobile.
arrowDistance?: numberAdjust the distance of the arrow and the end of the children. This only applies
if positionOnChildren is set to left (0) or right (2).