tiny-context-menu-js

• Gzips 2KB
• Zero dependencies
• Light/Dark themes + easy customization
• Type support
• Edge detection, Dynamic Positioning
• Accounts for any page scroll
• Memory and Event Clean-up

Dark mode

Installation

1npm i tiny-context-menu-js

Vanilla js

1import ContextMenu from "tiny-context-menu-js";
2const targetContainer = document.querySelector('.target-container')
3const options = [
4  { label: 'Item 1', action: () => { console.log('item 1'); } },
5  { label: 'Item 2', action: () => { console.log('item 2'); } },
6]
7
8ContextMenu(targetContainer, options, 'light').init(); // initialize instance
9ContextMenu().destroy();                               // remove instance

TypeScript

1import ContextMenu, { MenuOption } from "tiny-context-menu-js";
2const targetContainer = document.querySelector('.target-container') as HTMLElement;
3const options: MenuOption[] = [
4  { label: 'Item 1', action: () => { console.log('item 1'); } },
5  { label: 'Item 2', action: () => { console.log('item 2'); } },
6]
7
8ContextMenu(targetContainer, options).init(); // initialize instance (forego theme param for default 'dark')
9ContextMenu().destroy();                      // remove instance

Options examples

1
2// Use svgs within labels:
3// Must wrap label value in Array. 
4// Svg must be defined in first index of Array --> [svg, 'title']
5const svg = '<svg stroke="currentColor" fill="currentColor" stroke-width="0" viewBox="0 0 20 20" aria-hidden="true" height="14px" width="14px" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>';
6
7const items = [
8  {
9    label: [svg, "Item Title"],
10  }
11]

Theme examples

1// Two pre-loaded themes (dark/light)
2const theme = 'dark'
3const theme2 = 'light'
4
5// Custom Theming - KEYS ARE CASE SENSITIVE
6const theme3 = { 
7  background: 'red',
8  backgroundhover: 'rgba(0, 255, 0, 0.8)',
9  text: '#eee',
10  texthover: '#FFFFFF',
11  scrollthumb: 'hsla(0, 0%, 20%, 0.8 )',
12}

Light mode

Altering CSS

CSS comes preloaded

• If you want to edit the CSS directly, do so in "../node_modules/tiny-context-menu-js/dist/context-menu.css"

License

This project is licensed under the MIT License