https://github.com/timobechtel/easycontext
Simple contextmenu for the web
https://github.com/timobechtel/easycontext
contextmenu javascript rightclickmenu
Last synced: about 1 month ago
JSON representation
Simple contextmenu for the web
- Host: GitHub
- URL: https://github.com/timobechtel/easycontext
- Owner: TimoBechtel
- License: mit
- Created: 2020-04-26T22:34:56.000Z (almost 6 years ago)
- Default Branch: main
- Last Pushed: 2023-01-06T04:28:31.000Z (about 3 years ago)
- Last Synced: 2025-04-04T11:12:28.795Z (11 months ago)
- Topics: contextmenu, javascript, rightclickmenu
- Language: JavaScript
- Size: 249 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 14
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Awesome Lists containing this project
README
easycontext
Simple context menu for the web.
·
Homepage
·
View Demo
·
Report Bug / Request Feature
·
## Table of Contents
- [Installation](#Install)
- [Usage](#usage)
- [Test](#run-tests)
- [Contact](#contact)
- [Contributing](#Contributing)
- [License](#license)
## Install
### NPM:
```sh
npm install easycontext
```
### CDN:
```html
```
## Usage
### Import as module:
```javascript
import { contextmenu } from 'easycontext';
```
### Or when using the CDN:
```javascript
const { contextmenu } = easycontext;
```
### Use
Use `contextmenu` for selecting one or more HTMLElements to append a context menu to.
You 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.
### Example:
```javascript
contextmenu('#my-button', [
{
text: 'This is a button',
onClick() {
console.log('Do something');
},
},
]);
// you can also use a funtion to dynamically generate menu items:
contextmenu('button', (target) => {
return target.classList.contains('removable')
? [
{
text: 'Remove',
onClick() {
target.parentElement.removeChild(target);
},
},
]
: [
{
text: 'This is not clickable',
},
];
});
// you can also just add a context menu to everything
contextmenu(document, [
{
text: 'Reload page',
onClick() {
window.location.reload();
},
},
]);
```
### Doc:
```typescript
/**
* Creates a context menu for given element(s) / selector string
* @param element Single HTMLElement, Array or query selector string (using @compactjs/uea)
* @param items Menu items or function that returns menu items
* @param options Additional Options
*/
function contextmenu(
element: string | HTMLElement | HTMLElement[] | HTMLCollection | NodeList,
items: MenuItem[] | ((target: HTMLElement) => MenuItem[]),
options?: MenuOptions
): void;
interface MenuItem {
/**
* Menu item text, can also be HTML
*/
text?: string;
/**
* A custom classname
*/
className?: string;
/**
* Function that is called when item is clicked.
* Not clickable, when omitted.
*/
onClick?: (event: Event) => void;
}
interface MenuOptions {
/**
* Parent element for the menu element to append to
* @default document.body
*/
parentElement: HTMLElement;
/**
* Document Root, internaly used for adding a click listener to hide context menu.
* @default document
*/
root: Document | HTMLElement;
/**
* Custom class name for context menu
* @default 'context-menu'
*/
className: string;
}
```
## Run tests
```sh
npm run test
```
## Contact
👤 **Timo Bechtel**
- Website: https://timobechtel.com
- Twitter: [@TimoBechtel](https://twitter.com/TimoBechtel)
- GitHub: [@TimoBechtel](https://github.com/TimoBechtel)
## 🤝 Contributing
Contributions, issues and feature requests are welcome!
1. Check [issues](https://github.com/TimoBechtel/easycontext/issues)
1. Fork the Project
1. Create your Feature Branch (`git checkout -b feat/AmazingFeature`)
1. Test your changes `npm run test`
1. Commit your Changes (`git commit -m 'feat: add amazingFeature'`)
1. Push to the Branch (`git push origin feat/AmazingFeature`)
1. Open a Pull Request
### Commit messages
This 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.
## Show your support
Give a ⭐️ if this project helped you!
## 📝 License
Distributed under the [MIT](https://github.com/TimoBechtel/easycontext/blob/main/LICENSE) License.
---
_This README was generated with ❤️ by [readme-md-generator](https://github.com/kefranabg/readme-md-generator)_