https://github.com/mithatakbulut/react-quickmenu
Create Menus Fast and Easy
https://github.com/mithatakbulut/react-quickmenu
context-menu dropdown-menu popup react react-components
Last synced: 3 months ago
JSON representation
Create Menus Fast and Easy
- Host: GitHub
- URL: https://github.com/mithatakbulut/react-quickmenu
- Owner: mithatakbulut
- Created: 2024-02-24T14:04:57.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-02-24T14:40:13.000Z (over 2 years ago)
- Last Synced: 2025-02-25T03:41:50.034Z (over 1 year ago)
- Topics: context-menu, dropdown-menu, popup, react, react-components
- Language: TypeScript
- Homepage: https://react-quickmenu.vercel.app/
- Size: 83 KB
- Stars: 0
- Watchers: 1
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
[](https://www.npmjs.com/package/react-quickmenu)
## Playground
[See the live demo on playground ↗](https://react-quickmenu.vercel.app/playground)
---
# Installation - Quick Start
To add React Quick Menu to your project, follow these steps:
### Installation via NPM
React Quick Menu can be easily integrated into your project via NPM (Node Package Manager). Open your terminal or command prompt in the root directory of your project and run the following command:
```bash
npm install react-quickmenu --save
```
The above command will download the React Quick Menu package to your project and add it to your dependencies.
### Usage
After adding the package to your project, you can start using React Quick Menu. First, you'll need to integrate the Context Menu provider into your project. To do this, add the `ContextMenuProvider` component to a top-level component in your project.
```bash
import { ContextMenuProvider } from "react-quickmenu";
const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
);
```
Next, you can define the context menu using the `ContextMenuWrapper` component within any component where you want to use the context menu.
```bash
import { ContextMenuWrapper, ContextMenu, ContextMenuItem } from 'react-quickmenu';
const MyComponent = () => {
const contextMenu = (
alert("MenuItem 1 clicked")} />
alert("MenuItem 2 clicked")} />
);
return (
{/* Content */}
);
};
```
---
# API Reference
This section provides detailed information about the components and props available in the React Quick Menu package.
### ContextMenuProvider
The `ContextMenuProvider` component is used to provide context menu functionality to the entire application. It should be rendered at the root of your application.
#### Props
- `theme` (optional): Specifies the theme to be applied to the context menu. (Default: light)
### ContextMenuWrapper
The `ContextMenuWrapper` component is used to wrap any component where you want to display a context menu. It defines the area where the context menu will appear when triggered.
#### Props
- `contextMenu`: The context menu content to be displayed.
- `children`: The child components within the wrapper where the context menu can be triggered.
### ContextMenu
The `ContextMenu` component defines a context menu group. It can contain `ContextMenuItem` and `ExpandingContextMenuItem` components.
#### Props
- `id`: A unique identifier for the context menu group.
---
**NOTE**
The first `ContextMenu` component must have `id` set to 0. Subsequent `ContextMenu` components added after it should have IDs incremented by 1, such as 1, 2, 3, and so on.
Do this ✅
```bash
alert("MenuItem 1 clicked")} />
alert("MenuItem 2 clicked")} />
alert("MenuItem 1 clicked")} />
alert("MenuItem 2 clicked")} />
```
Avoid doing this ❌
```bash
alert("MenuItem 1 clicked")} />
alert("MenuItem 2 clicked")} />
alert("MenuItem 1 clicked")} />
alert("MenuItem 2 clicked")} />
```
---
### ContextMenuItem
The `ContextMenuItem` component represents a single item in the context menu.
#### Props
- `text`: The text to be displayed for the menu item.
- `onClick`: The function to be called when the menu item is clicked.
- `disabled` (optional): Specifies whether the menu item is disabled.
### ExpandingContextMenuItem
The `ExpandingContextMenuItem` component represents a menu item that can expand to show additional items when clicked. This component can be nested to create a multi-level menu and must have a `ContextMenu` component as a child.
#### Props
- `text`: The text to be displayed for the menu item.
- `disabled` (optional): Specifies whether the menu item is disabled.