Context menu svelte
A svelte component designed for effortless creation of context menus.
Installation
npm install --save-dev context-menu-svelte
Example
<script>
import {ContextMenu, MenuOption } from "context-menu-svelte";
</script>
<ContextMenu showMenu={true}>
<MenuOption on:click={console.log} text="Add" />
<MenuDivider />
<MenuOption isDisabled={true} on:click={console.log} text="Go to" />
</ContextMenu>Additionally, you can customize the context menu's position and enable auto-hide functionality (when clicking outside the menu).
Usage
To utilize the context menu in a more authentic manner, use like this:
<script>
let showMenu = false;
let x = 0;
let y = 0;
function requestShowMenu(e){
showMenu = true;
x = e.clientX;
y = e.clientY;
}
</script>
<div on:contextmenu={requestShowMenu}>Text</div>
<ContextMenu bind:showMenu {x} {y}>
<MenuOption on:click={console.log} text="Hello world!"/>
</ContextMenu>