easycontext

Simple context menu for the web.

Usage no npm install needed!

<script type="module">
  import easycontext from 'https://cdn.skypack.dev/easycontext';
</script>

README

easycontext

Simple context menu for the web.

Version License: MIT

· Homepage · View Demo · Report Bug / Request Feature ·

Table of Contents

Install

NPM:

npm install easycontext

CDN:

<script src="https://unpkg.com/easycontext"></script>

Usage

Import as module:

import { contextmenu } from 'easycontext';

Or when using the CDN:

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 under the hood.

Example:

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:

/**
 * 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

npm run test

Contact

👤 Timo Bechtel

🤝 Contributing

Contributions, issues and feature requests are welcome!

  1. Check issues
  2. Fork the Project
  3. Create your Feature Branch (git checkout -b feat/AmazingFeature)
  4. Test your changes npm run test
  5. Commit your Changes (git commit -m 'feat: add amazingFeature')
  6. Push to the Branch (git push origin feat/AmazingFeature)
  7. Open a Pull Request

Commit messages

This project uses semantic-release for automated release versions. So commits in this project follow the Conventional Commits guidelines. I recommend using commitizen for automated commit messages.

Show your support

Give a ⭐️ if this project helped you!

📝 License

Distributed under the MIT License.

This README was generated with ❤️ by readme-md-generator