{"id":13620482,"url":"https://github.com/icflorescu/mantine-contextmenu","last_synced_at":"2025-04-05T17:05:17.971Z","repository":{"id":152587710,"uuid":"626509712","full_name":"icflorescu/mantine-contextmenu","owner":"icflorescu","description":"Craft your applications for productivity and meet your users’ expectations by enhancing your Mantine-based UIs with a desktop-grade, lightweight yet fully-featured, dark-theme aware context-menu component, built by the creator of Mantine DataTable.","archived":false,"fork":false,"pushed_at":"2024-09-04T08:21:07.000Z","size":5621,"stargazers_count":127,"open_issues_count":2,"forks_count":6,"subscribers_count":4,"default_branch":"main","last_synced_at":"2024-10-29T14:58:32.938Z","etag":null,"topics":["context-menu","dark-mode","dark-theme","javascript","mantine","react","typescript","ui","ui-kit"],"latest_commit_sha":null,"homepage":"https://icflorescu.github.io/mantine-contextmenu/","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/icflorescu.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":"CONTRIBUTING.md","funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":"icflorescu"}},"created_at":"2023-04-11T15:56:19.000Z","updated_at":"2024-10-13T06:23:18.000Z","dependencies_parsed_at":"2023-11-06T10:47:53.427Z","dependency_job_id":"b3e5fc00-dc6f-4465-9139-e6c67d2d0f26","html_url":"https://github.com/icflorescu/mantine-contextmenu","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icflorescu%2Fmantine-contextmenu","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icflorescu%2Fmantine-contextmenu/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icflorescu%2Fmantine-contextmenu/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/icflorescu%2Fmantine-contextmenu/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/icflorescu","download_url":"https://codeload.github.com/icflorescu/mantine-contextmenu/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247369953,"owners_count":20927928,"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","dark-mode","dark-theme","javascript","mantine","react","typescript","ui","ui-kit"],"created_at":"2024-08-01T21:00:56.278Z","updated_at":"2025-04-05T17:05:17.936Z","avatar_url":"https://github.com/icflorescu.png","language":"TypeScript","readme":"# Mantine ContextMenu\n\n![Publish NPM \u0026 deploy docs workflow](https://github.com/icflorescu/mantine-contextmenu/actions/workflows/publish-and-deploy.yml/badge.svg)  \n[![NPM version][npm-image]][npm-url]\n[![License][license-image]][license-url]\n[![Stars][stars-image]][stars-url]\n[![Last commit][last-commit-image]][repo-url]\n[![Closed issues][closed-issues-image]][closed-issues-url]\n[![Downloads][downloads-image]][npm-url]\n[![Language][language-image]][repo-url]\n[![Sponsor the author][sponsor-image]][sponsor-url]\n\nCraft your applications for productivity and meet your users’ expectations by enhancing your Mantine-based UIs with a desktop-grade, [lightweight](https://bundlephobia.com/package/mantine-contextmenu) yet fully-featured, **dark-theme aware** context-menu component, built by the creator of [Mantine DataTable](https://icflorescu.github.io/mantine-datatable/).\n\n[![Mantine ContextMenu](https://user-images.githubusercontent.com/581999/294179957-e5b07f1f-701b-49a9-a518-4e42afb8b70a.png)](https://icflorescu.github.io/mantine-contextmenu/)\n\n**⚠️ NOTE: Mantine ContextMenu V7 is compatible with Mantine V7.**  \n**💡 If you're looking for the old version that works with [Mantine V6](https://v6.mantine.dev), head over to [Mantine ContextMenu V6](https://icflorescu.github.io/mantine-contextmenu-v6).**  \n\n## Features\n\n- **[Lightweight](https://bundlephobia.com/package/mantine-contextmenu)** - no external dependencies, no bloat\n- **Dark-theme aware** - automatically adapts to the current [Mantine color scheme](https://mantine.dev/theming/color-schemes/)\n- **[Simple API](https://icflorescu.github.io/mantine-contextmenu/getting-started)** - just wrap your application in the `ContextMenuProvider` component and use the hook-generated function in your code\n- **[Custom content support](https://icflorescu.github.io/mantine-contextmenu/examples/custom-content)** - use any Mantine component as context menu content\n- **[Highly customizable styling](https://icflorescu.github.io/mantine-contextmenu/examples/styling)** - use the `className`/`classNames` and `style`/`styles` props to customize the context menu appearance\n- **[Written in Typescript and well-documented](https://icflorescu.github.io/mantine-contextmenu/type-definitions)** - with detailed JSDoc annotations for each exported function and component\n\n## Full documentation and examples\n\nVisit [icflorescu.github.io/mantine-contextmenu](https://icflorescu.github.io/mantine-contextmenu/) to view the full documentation and learn how to use it by browsing the list of usage examples.\n\n## Quickstart\n\nCreate a new [Mantine application](https://mantine.dev/pages/getting-started/), make sure to have the `clsx` peer dependency installed,\nthen install the package with `npm i mantine-contextmenu` or `yarn add mantine-contextmenu`.\n\nImport the necessary CSS files:\n\n```ts\nimport '@mantine/core/styles.layer.css';\nimport 'mantine-contextmenu/styles.layer.css';\nimport './layout.css';\n```\n\nMake sure to [apply the styles in the correct order](https://mantine.dev/styles/mantine-styles/):\n\n```css\n/* layout.css */\n/* 👇 Apply Mantine core styles first, ContextMenu styles second */\n@layer mantine, mantine-contextmenu;\n```\n\nWrap your application in a `ContextMenuProvider` **inside** the `MantineProvider`:\n\n```tsx\nimport { MantineProvider } from '@mantine/core';\nimport { ContextMenuProvider } from 'mantine-contextmenu';\n\nfunction App() {\n  return (\n    \u003cMantineProvider\u003e\n      \u003cContextMenuProvider\u003e{/* your app code here... */}\u003c/ContextMenuProvider\u003e\n    \u003c/MantineProvider\u003e\n  );\n}\n```\n\nUse the `showContextMenu` function generated by the `useContextMenu` in your code:\n\n```tsx\n'use client';\n// 👆 Since 'useContextMenu' is a hook, don't forget to add the 'use client' directive\n//    at the top of your file if you're using it in a RSC context\n\nimport { IconCopy, IconDownload } from '@tabler/icons-react';\nimport { useContextMenu } from 'mantine-contextmenu';\nimport Picture from '~/components/Picture';\nimport { copyImageToClipboard, downloadImage, unsplashImages } from '~/lib/image';\n\nexport default function GettingStartedExample() {\n  const { showContextMenu } = useContextMenu();\n\n  const image = unsplashImages[0];\n  const { src } = image.file;\n\n  return (\n    \u003cPicture\n      image={image}\n      onContextMenu={showContextMenu([\n        {\n          key: 'copy',\n          icon: \u003cIconCopy size={16} /\u003e,\n          title: 'Copy to clipboard',\n          onClick: () =\u003e copyImageToClipboard(src),\n        },\n        {\n          key: 'download',\n          icon: \u003cIconDownload size={16} /\u003e,\n          title: 'Download to your computer',\n          onClick: () =\u003e downloadImage(src),\n        },\n      ])}\n    /\u003e\n  );\n}\n```\n\nMake sure to browse the list of [usage examples](https://icflorescu.github.io/mantine-contextmenu/examples/basic-usage) to learn how to unleash the full power of Mantine ContextMenu.\n\n## Other useful resources\n\n💡 [Mantine DataTable](https://icflorescu.github.io/mantine-datatable/) - The lightweight, dependency-free, dark-theme aware table component for your Mantine UI data-rich applications, featuring asynchronous data loading support, pagination, intuitive Gmail-style additive batch rows selection, column sorting, custom cell data rendering, row expansion, nesting, context menus, and much more. Built by the creator of Mantine ContextMenu.\n\n[![Mantine DataTable](https://user-images.githubusercontent.com/581999/294180790-93289cec-4d73-47b5-988f-8c93dd3443fe.png)](https://icflorescu.github.io/mantine-datatable/)\n\n## Contributing\n\nSee the [contributing guide in the documentation website](https://icflorescu.github.io/mantine-contextmenu/contribute-and-support) or the repo [CONTRIBUTING.md](https://github.com/icflorescu/mantine-contextmenu/blob/master/CONTRIBUTING.md) file for details.\n\n💡 Most importantly, **please make sure to target your PRs to the `next` branch!**\n\nHere's the list of people who have already contributed to Mantine ContextMenu:\n\n[![Contributors list](https://contrib.rocks/image?repo=icflorescu/mantine-contextmenu)](https://github.com/icflorescu/mantine-contextmenu/graphs/contributors)\n\nWant to [become a code contributor](https://icflorescu.github.io/mantine-contextmenu/contribute-and-support)?\n\n## Support the project\n\nIf you find this package useful, please consider ❤️ [sponsoring my work](https://github.com/sponsors/icflorescu).  \nYour sponsorship will help me dedicate more time to maintaining the project and will encourage me to add new features and fix existing bugs.  \nIf you're a company using Mantine, Mantine ContextMenu or [Mantine DataTable](https://icflorescu.github.io/mantine-datatable/) in a commercial project, you can also [hire my services](https://github.com/icflorescu).\n\n## Other means of support\n\nIf you can't afford to sponsor the project or hire my services, there are other ways you can support my work:  \n\n- 🙏 star the repository;\n- 💕 [tweet about it](https://twitter.com/share?text=Check%20out%20the%20missing%20context-menu%20for%20Mantine%20UI%20applications!\u0026url=https%3A%2F%2Fgithub.com%2Ficflorescu%2Fmantine-contextmenu\u0026hashtags=react%2Cmantine%2Cui%2Ccontextmenu%2Cfrontend%2Copensource\u0026via=icflorescu);\n- 👍 [endorse me on LinkedIn](https://www.linkedin.com/in/icflorescu).\n\nThe more stars this repository gets, the more visibility it gains among the Mantine users community. The more\nusers it gets, the more chances that some of those users will become active code contributors willing to put\ntheir effort into bringing new features to life and/or fixing bugs.\n\nAs the repository gain awareness, my chances of getting hired to work on Mantine-based projects will increase,\nwhich in turn will help maintain my vested interest in keeping the project alive.\n\n## Hiring the author\n\nIf you want to hire my services, don't hesitate to drop me a line at the email address listed in my [GitHub profile](https://github.com/icflorescu).  \nI'm currently getting a constant flow of approaches, some of them relevant, others not so relevant.  \nMentioning “Mantine ContextMenu” in your text would help me prioritize your message.\n\n## License\n\nThe [MIT License](https://github.com/icflorescu/mantine-contextmenu/blob/master/LICENSE).\n\n[npm-url]: https://npmjs.org/package/mantine-contextmenu\n[repo-url]: https://github.com/icflorescu/mantine-contextmenu\n[stars-url]: https://github.com/icflorescu/mantine-contextmenu/stargazers\n[closed-issues-url]: https://github.com/icflorescu/mantine-contextmenu/issues?q=is%3Aissue+is%3Aclosed\n[license-url]: LICENSE\n[npm-image]: https://img.shields.io/npm/v/mantine-contextmenu.svg?style=flat-square\n[license-image]: http://img.shields.io/npm/l/mantine-contextmenu.svg?style=flat-square\n[downloads-image]: http://img.shields.io/npm/dm/mantine-contextmenu.svg?style=flat-square\n[stars-image]: https://img.shields.io/github/stars/icflorescu/mantine-contextmenu?style=flat-square\n[last-commit-image]: https://img.shields.io/github/last-commit/icflorescu/mantine-contextmenu?style=flat-square\n[closed-issues-image]: https://img.shields.io/github/issues-closed-raw/icflorescu/mantine-contextmenu?style=flat-square\n[language-image]: https://img.shields.io/github/languages/top/icflorescu/mantine-contextmenu?style=flat-square\n[sponsor-image]: https://img.shields.io/badge/sponsor-violet?style=flat-square\n[sponsor-url]: https://github.com/sponsors/icflorescu\n","funding_links":["https://github.com/sponsors/icflorescu"],"categories":["UI Components"],"sub_categories":["Menu"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficflorescu%2Fmantine-contextmenu","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ficflorescu%2Fmantine-contextmenu","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ficflorescu%2Fmantine-contextmenu/lists"}