tiny-context-menu

yet another context menu

Usage

add following styles to your css/less/sass file.

1.tiny_context_menu {
2  border: 1px solid #e3e4e5;
3  background: #fff;
4  width: 250px;
5  box-shadow: 2px 2px 12px #e3e4e5;
6  padding: 5px 0;
7}
8.tiny_context_menu .menu-item {
9  padding: 5px 35px;
10  font-size: 14px;
11  user-select: none;
12}
13.tiny_context_menu .menu-item:hover {
14  background: #e3e4e5;
15}

1import Menu from 'tiny-context-menu';
2
3const menu = new Menu();
4menu.add('button1', () => console.log('button1'));
5menu.add('button2', () => console.log('button2'));
6menu.add('button3', () => console.log('button3'));
7menu.mount('body');
8document.querySelector('.parent').addEventListener('contextmenu', (e) => {
9  e.preventDefault();
10  menu.updatePosition(e.pageX, e.pageY);
11  menu.show();
12});
13document.querySelector('.parent').addEventListener('click', () => { menu.hide(); })

API

menu.add(name, click, condition)

add name, click event to the context menu.

1menu.add('button', () => { console.log('button'); })

menu.updatePosition(x, y)

update positon of the context menu

1menu.update(0, 0);

menu.show()

show context menu;

menu.hide()

hide context menu