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>