chakra-ui-contextmenu


> Context Menu component for Chakra UI

!Demo for React Complex Tree

Checkout the storybook for more examples!

Installation

To start using chakra-ui-contextmenu, install it to your project as a dependency via

``
npm install chakra-ui-contextmenu
`

then import it and add your context menu component with

`typescript jsx
import { ContextMenu } from 'chakra-ui-contextmenu';
import { Box, Button, ChakraProvider } from '@chakra-ui/react';
import { MenuList, MenuItem } from '@chakra-ui/menu';

render(
renderMenu={() => (

Context Menu Item 1
Context Menu Item 2

)}
>
{ref =>

}

);
`

Usage with Typescript

When using Typescript, you can type the context menu component with the kind
of target component to get better typings:

`typescript jsx
render(

renderMenu={() => (

Context Menu Item 1
Context Menu Item 2

)}
>
{ref =>

}

);
`

Props

The ContextMenu component provides the following props:

`typescript
export interface ContextMenuProps {
renderMenu: () => JSX.Element | null;
children: (ref: MutableRefObject) => JSX.Element | null;
menuProps?: MenuProps;
portalProps?: PortalProps;
menuButtonProps?: MenuButtonProps;
}
``