{"id":16355959,"url":"https://github.com/timobechtel/easycontext","last_synced_at":"2026-02-03T04:35:16.586Z","repository":{"id":38174901,"uuid":"259147486","full_name":"TimoBechtel/easycontext","owner":"TimoBechtel","description":"Simple contextmenu for the web","archived":false,"fork":false,"pushed_at":"2023-01-06T04:28:31.000Z","size":255,"stargazers_count":2,"open_issues_count":14,"forks_count":0,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-04-04T11:12:28.795Z","etag":null,"topics":["contextmenu","javascript","rightclickmenu"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","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/TimoBechtel.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-04-26T22:34:56.000Z","updated_at":"2023-03-07T02:39:31.000Z","dependencies_parsed_at":"2023-02-05T07:45:45.830Z","dependency_job_id":null,"html_url":"https://github.com/TimoBechtel/easycontext","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/TimoBechtel/easycontext","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimoBechtel%2Feasycontext","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimoBechtel%2Feasycontext/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimoBechtel%2Feasycontext/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimoBechtel%2Feasycontext/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TimoBechtel","download_url":"https://codeload.github.com/TimoBechtel/easycontext/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TimoBechtel%2Feasycontext/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":261703157,"owners_count":23196906,"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":["contextmenu","javascript","rightclickmenu"],"created_at":"2024-10-11T01:42:15.223Z","updated_at":"2026-02-03T04:35:16.538Z","avatar_url":"https://github.com/TimoBechtel.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"\u003ch1 align=\"center\"\u003eeasycontext\u003c/h1\u003e\n\u003ch3 align=\"center\"\u003eSimple context menu for the web.\u003c/h3\u003e\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/easycontext\" target=\"_blank\"\u003e\n    \u003cimg alt=\"Version\" src=\"https://img.shields.io/npm/v/easycontext.svg\"\u003e\n  \u003c/a\u003e\n  \u003ca href=\"https://github.com/TimoBechtel/easycontext/blob/main/LICENSE\" target=\"_blank\"\u003e\n    \u003cimg alt=\"License: MIT\" src=\"https://img.shields.io/github/license/TimoBechtel/easycontext\" /\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\u003cp align=\"center\"\u003e\n  ·\n  \u003ca href=\"https://github.com/TimoBechtel/easycontext#readme\"\u003eHomepage\u003c/a\u003e\n  ·\n  \u003ca href=\"https://timobechtel.github.io/easycontext/\"\u003eView Demo\u003c/a\u003e\n  ·\n  \u003ca href=\"https://github.com/TimoBechtel/easycontext/issues\"\u003eReport Bug / Request Feature\u003c/a\u003e\n  ·\n\u003c/p\u003e\n\n## Table of Contents\n\n- [Installation](#Install)\n- [Usage](#usage)\n- [Test](#run-tests)\n- [Contact](#contact)\n- [Contributing](#Contributing)\n- [License](#license)\n\n## Install\n\n### NPM:\n\n```sh\nnpm install easycontext\n```\n\n### CDN:\n\n```html\n\u003cscript src=\"https://unpkg.com/easycontext\"\u003e\u003c/script\u003e\n```\n\n## Usage\n\n### Import as module:\n\n```javascript\nimport { contextmenu } from 'easycontext';\n```\n\n### Or when using the CDN:\n\n```javascript\nconst { contextmenu } = easycontext;\n```\n\n### Use\n\nUse `contextmenu` for selecting one or more HTMLElements to append a context menu to.\nYou can it one ore more HTMLElements, a selector string or a NodeList. It uses [Universal Element Accept](https://github.com/CompactJS/uea) under the hood.\n\n### Example:\n\n```javascript\ncontextmenu('#my-button', [\n  {\n    text: 'This is a button',\n    onClick() {\n      console.log('Do something');\n    },\n  },\n]);\n\n// you can also use a funtion to dynamically generate menu items:\ncontextmenu('button', (target) =\u003e {\n  return target.classList.contains('removable')\n    ? [\n        {\n          text: 'Remove',\n          onClick() {\n            target.parentElement.removeChild(target);\n          },\n        },\n      ]\n    : [\n        {\n          text: 'This is not clickable',\n        },\n      ];\n});\n\n// you can also just add a context menu to everything\ncontextmenu(document, [\n  {\n    text: 'Reload page',\n    onClick() {\n      window.location.reload();\n    },\n  },\n]);\n```\n\n### Doc:\n\n```typescript\n/**\n * Creates a context menu for given element(s) / selector string\n * @param element Single HTMLElement, Array or query selector string (using @compactjs/uea)\n * @param items Menu items or function that returns menu items\n * @param options Additional Options\n */\nfunction contextmenu(\n  element: string | HTMLElement | HTMLElement[] | HTMLCollection | NodeList,\n  items: MenuItem[] | ((target: HTMLElement) =\u003e MenuItem[]),\n  options?: MenuOptions\n): void;\n\ninterface MenuItem {\n  /**\n   * Menu item text, can also be HTML\n   */\n  text?: string;\n  /**\n   * A custom classname\n   */\n  className?: string;\n  /**\n   * Function that is called when item is clicked.\n   * Not clickable, when omitted.\n   */\n  onClick?: (event: Event) =\u003e void;\n}\n\ninterface MenuOptions {\n  /**\n   * Parent element for the menu element to append to\n   * @default document.body\n   */\n  parentElement: HTMLElement;\n  /**\n   * Document Root, internaly used for adding a click listener to hide context menu.\n   * @default document\n   */\n  root: Document | HTMLElement;\n  /**\n   * Custom class name for context menu\n   * @default 'context-menu'\n   */\n  className: string;\n}\n```\n\n## Run tests\n\n```sh\nnpm run test\n```\n\n## Contact\n\n👤 **Timo Bechtel**\n\n- Website: https://timobechtel.com\n- Twitter: [@TimoBechtel](https://twitter.com/TimoBechtel)\n- GitHub: [@TimoBechtel](https://github.com/TimoBechtel)\n\n## 🤝 Contributing\n\nContributions, issues and feature requests are welcome!\u003cbr /\u003e\n\n1. Check [issues](https://github.com/TimoBechtel/easycontext/issues)\n1. Fork the Project\n1. Create your Feature Branch (`git checkout -b feat/AmazingFeature`)\n1. Test your changes `npm run test`\n1. Commit your Changes (`git commit -m 'feat: add amazingFeature'`)\n1. Push to the Branch (`git push origin feat/AmazingFeature`)\n1. Open a Pull Request\n\n### Commit messages\n\nThis project uses semantic-release for automated release versions. So commits in this project follow the [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0-beta.2/) guidelines. I recommend using [commitizen](https://github.com/commitizen/cz-cli) for automated commit messages.\n\n## Show your support\n\nGive a ⭐️ if this project helped you!\n\n## 📝 License\n\nDistributed under the [MIT](https://github.com/TimoBechtel/easycontext/blob/main/LICENSE) License.\n\n---\n\n_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimobechtel%2Feasycontext","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftimobechtel%2Feasycontext","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftimobechtel%2Feasycontext/lists"}