tiny-context-menu-js
TypeScript icon, indicating that this package has built-in type declarations

1.1.0 • Public • Published

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

screen Dark mode

Installation

npm i tiny-context-menu-js

Vanilla js

import ContextMenu from "tiny-context-menu-js";
const targetContainer = document.querySelector('.target-container')
const options = [
  { label: 'Item 1', action: () => { console.log('item 1'); } },
  { label: 'Item 2', action: () => { console.log('item 2'); } },
]

ContextMenu(targetContainer, options, 'light').init(); // initialize instance
ContextMenu().destroy();                               // remove instance

TypeScript

import ContextMenu, { MenuOption } from "tiny-context-menu-js";
const targetContainer = document.querySelector('.target-container') as HTMLElement;
const options: MenuOption[] = [
  { label: 'Item 1', action: () => { console.log('item 1'); } },
  { label: 'Item 2', action: () => { console.log('item 2'); } },
]

ContextMenu(targetContainer, options).init(); // initialize instance (forego theme param for default 'dark')
ContextMenu().destroy();                      // remove instance

Options examples

// Use svgs within labels:
// Must wrap label value in Array. 
// Svg must be defined in first index of Array --> [svg, 'title']
const 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>';

const items = [
  {
    label: [svg, "Item Title"],
  }
]

Theme examples

// Two pre-loaded themes (dark/light)
const theme = 'dark'
const theme2 = 'light'

// Custom Theming - KEYS ARE CASE SENSITIVE
const theme3 = { 
  background: 'red',
  backgroundhover: 'rgba(0, 255, 0, 0.8)',
  text: '#eee',
  texthover: '#FFFFFF',
  scrollthumb: 'hsla(0, 0%, 20%, 0.8 )',
}

screen 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

Readme

Keywords

none

Package Sidebar

Install

npm i tiny-context-menu-js

Weekly Downloads

1

Version

1.1.0

License

MIT

Unpacked Size

11.5 kB

Total Files

6

Last publish

Collaborators

  • ottofy