{"id":26018513,"url":"https://github.com/mithatakbulut/react-quickmenu","last_synced_at":"2026-04-10T01:45:48.935Z","repository":{"id":224221988,"uuid":"762720779","full_name":"mithatakbulut/react-quickmenu","owner":"mithatakbulut","description":"Create Menus Fast and Easy","archived":false,"fork":false,"pushed_at":"2024-02-24T14:40:13.000Z","size":85,"stargazers_count":0,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-25T03:41:50.034Z","etag":null,"topics":["context-menu","dropdown-menu","popup","react","react-components"],"latest_commit_sha":null,"homepage":"https://react-quickmenu.vercel.app/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/mithatakbulut.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-02-24T14:04:57.000Z","updated_at":"2024-02-24T14:40:34.000Z","dependencies_parsed_at":"2024-02-24T16:49:41.311Z","dependency_job_id":null,"html_url":"https://github.com/mithatakbulut/react-quickmenu","commit_stats":null,"previous_names":["w1that/react-quickmenu","mithatakbulut/react-quickmenu"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mithatakbulut%2Freact-quickmenu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mithatakbulut%2Freact-quickmenu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mithatakbulut%2Freact-quickmenu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/mithatakbulut%2Freact-quickmenu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/mithatakbulut","download_url":"https://codeload.github.com/mithatakbulut/react-quickmenu/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":242157273,"owners_count":20081041,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["context-menu","dropdown-menu","popup","react","react-components"],"created_at":"2025-03-06T06:16:07.563Z","updated_at":"2025-12-31T00:51:52.235Z","avatar_url":"https://github.com/mithatakbulut.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"[![](https://img.shields.io/npm/v/react-quickmenu)](https://www.npmjs.com/package/react-quickmenu)\n\n## Playground\n\n[See the live demo on playground ↗](https://react-quickmenu.vercel.app/playground)\n\n![Gif Adı](https://i.ibb.co/Q8wpjF3/demo.gif)\n\n---\n\n# Installation - Quick Start\n\nTo add React Quick Menu to your project, follow these steps:\n\n### Installation via NPM\n\nReact 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:\n\n```bash\nnpm install react-quickmenu --save\n```\n\nThe above command will download the React Quick Menu package to your project and add it to your dependencies.\n\n### Usage\n\nAfter 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.\n\n```bash\nimport { ContextMenuProvider } from \"react-quickmenu\";\n\nconst root = ReactDOM.createRoot(document.getElementById(\"root\"));\nroot.render(\n  \u003cContextMenuProvider theme={\"dark\"}\u003e\n    \u003cApp /\u003e\n  \u003c/ContextMenuProvider\u003e\n);\n```\n\nNext, you can define the context menu using the `ContextMenuWrapper` component within any component where you want to use the context menu.\n\n```bash\nimport { ContextMenuWrapper, ContextMenu, ContextMenuItem } from 'react-quickmenu';\n\nconst MyComponent = () =\u003e {\n  const contextMenu = (\n    \u003cContextMenu id={0}\u003e\n        \u003cContextMenuItem text=\"MenuItem 1\" onClick={() =\u003e alert(\"MenuItem 1 clicked\")} /\u003e\n        \u003cContextMenuItem text=\"MenuItem 2\" onClick={() =\u003e alert(\"MenuItem 2 clicked\")} /\u003e\n    \u003c/ContextMenu\u003e\n  );\n\n  return (\n    \u003cContextMenuWrapper contextMenu={contextMenu}\u003e\n      \u003cdiv\u003e\n        {/* Content */}\n      \u003c/div\u003e\n    \u003c/ContextMenuWrapper\u003e\n  );\n};\n```\n\n---\n\n# API Reference\n\nThis section provides detailed information about the components and props available in the React Quick Menu package.\n\n### ContextMenuProvider\n\nThe `ContextMenuProvider` component is used to provide context menu functionality to the entire application. It should be rendered at the root of your application.\n\n#### Props\n\n- `theme` (optional): Specifies the theme to be applied to the context menu. (Default: light)\n\n### ContextMenuWrapper\n\nThe `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.\n\n#### Props\n\n- `contextMenu`: The context menu content to be displayed.\n- `children`: The child components within the wrapper where the context menu can be triggered.\n\n### ContextMenu\n\nThe `ContextMenu` component defines a context menu group. It can contain `ContextMenuItem` and `ExpandingContextMenuItem` components.\n\n#### Props\n\n- `id`: A unique identifier for the context menu group.\n\n---\n**NOTE**\n\nThe 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.\n\nDo this ✅\n\n```bash\n    \u003cContextMenu id={0}\u003e\n        \u003cContextMenuItem text=\"MenuItem 1\" onClick={() =\u003e alert(\"MenuItem 1 clicked\")} /\u003e\n        \u003cContextMenuItem text=\"MenuItem 2\" onClick={() =\u003e alert(\"MenuItem 2 clicked\")} /\u003e\n\n        \u003cExpandingContextMenuItem text=\"MenuItem 3\"\u003e\n            \u003cContextMenu id={1}\u003e\n                \u003cContextMenuItem text=\"MenuItem 1\" onClick={() =\u003e alert(\"MenuItem 1 clicked\")} /\u003e\n                \u003cContextMenuItem text=\"MenuItem 2\" onClick={() =\u003e alert(\"MenuItem 2 clicked\")} /\u003e\n            \u003c/ContextMenu\u003e\n        \u003c/ExpandingContextMenuItem\u003e\n    \u003c/ContextMenu\u003e\n```\n\nAvoid doing this ❌\n\n```bash\n    \u003cContextMenu id={1}\u003e\n        \u003cContextMenuItem text=\"MenuItem 1\" onClick={() =\u003e alert(\"MenuItem 1 clicked\")} /\u003e\n        \u003cContextMenuItem text=\"MenuItem 2\" onClick={() =\u003e alert(\"MenuItem 2 clicked\")} /\u003e\n\n        \u003cExpandingContextMenuItem text=\"MenuItem 3\"\u003e\n            \u003cContextMenu id={3}\u003e\n                \u003cContextMenuItem text=\"MenuItem 1\" onClick={() =\u003e alert(\"MenuItem 1 clicked\")} /\u003e\n                \u003cContextMenuItem text=\"MenuItem 2\" onClick={() =\u003e alert(\"MenuItem 2 clicked\")} /\u003e\n            \u003c/ContextMenu\u003e\n        \u003c/ExpandingContextMenuItem\u003e\n    \u003c/ContextMenu\u003e\n```\n---\n\n### ContextMenuItem\n\nThe `ContextMenuItem` component represents a single item in the context menu.\n\n#### Props\n\n- `text`: The text to be displayed for the menu item.\n- `onClick`: The function to be called when the menu item is clicked.\n- `disabled` (optional): Specifies whether the menu item is disabled.\n\n### ExpandingContextMenuItem\n\nThe `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.\n\n#### Props\n\n- `text`: The text to be displayed for the menu item.\n- `disabled` (optional): Specifies whether the menu item is disabled.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmithatakbulut%2Freact-quickmenu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmithatakbulut%2Freact-quickmenu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmithatakbulut%2Freact-quickmenu/lists"}