https://github.com/lukasbach/chakra-ui-contextmenu

Context Menu component for Chakra UI
https://github.com/lukasbach/chakra-ui-contextmenu

chakra chakra-ui component context-menu contextmenu library react rightclick tiny typed typings ui

Last synced: 3 days ago
JSON representation

Context Menu component for Chakra UI

• Host: GitHub
• URL: https://github.com/lukasbach/chakra-ui-contextmenu
• Owner: lukasbach
• License: mit
• Created: 2021-09-21T16:20:36.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2022-10-27T14:33:38.000Z (about 2 years ago)
• Last Synced: 2024-10-12T14:29:53.376Z (28 days ago)
• Topics: chakra, chakra-ui, component, context-menu, contextmenu, library, react, rightclick, tiny, typed, typings, ui
• Language: TypeScript
• Homepage: http://lukasbach.github.io/chakra-ui-contextmenu/
• Size: 1.16 MB
• Stars: 23
• Watchers: 3
• Forks: 3
• Open Issues: 2
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# chakra-ui-contextmenu

![](https://badgen.net/npm/v/chakra-ui-contextmenu)

![](https://badgen.net/npm/types/chakra-ui-contextmenu)

[![](https://badgen.net/bundlephobia/dependency-count/react-complex-tree)](https://bundlephobia.com/package/chakra-ui-contextmenu)

[![](https://badgen.net/bundlephobia/minzip/react-complex-tree)](https://bundlephobia.com/package/chakra-ui-contextmenu)

> Context Menu component for Chakra UI

![Demo for React Complex Tree](https://i.imgur.com/LDeTCoQ.gif)

[Checkout the storybook for more examples!](http://lukasbach.github.io/chakra-ui-contextmenu/)

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

   (

      

        Context Menu Item 1

        Context Menu Item 2

      

    )}

  >

    {ref => 
Target
}

  

);

```


## 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 => 
Target
}

  

);

```


## 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;

}

```