ContextMenu(WIP)

Add custom contextMenu to you application the simplest way.

Online DEMO
Refer to the Documentations

Feature

• 🪆 Support Deeply nested sub menu
• 💪 Fully written in TypeScript
• 🎄 Fully tree-shakable
• 📦 Fully customizable
• 🖇 SSR ready
• ✨ Animation support
• 🎨 Opted-in UI component
• 🔨 Multi-framework support
  • React
  • Vue
  • Angular
  • Vanilla JavaScript
  • Web Component

Current Progress

• Core

  • Basic top-level menu using the custom element
  • Deeply nested menu
  • Declarative API
  • UI preset(yet in beta)
  • Online preview editor
  • Animation

• Vue (both Vue2 & Vue3, empowered by Vue Demi)

  • v-directive usage
  • useContextMenu hook
  • <ContextMenu /> component
  • <MenuGroup /> and <MenuItem /> component for creating nested menu

• React

  • useContextMenu hook
  • <ContextMenu /> component
  • <MenuGroup /> and <MenuItem /> component

• Angular(pending)

• Vanilla JavaScript

  • Native Web Component
  • JavaScript API

• Docs

  • Vitepress
  • Repl Playground

• IIFE format for script tag

Installation

# native JavaScript
npm i @contextmenu/core

# vue
npm i @contextmenu/vue @contextmenu/core

# react
npm i @contextmenu/react @contextmenu/core

Quick example

Use the ContextMenu component to create a context menu.

1. Vue setup

<script setup lang="ts">
import { ContextMenu } from '@contextmenu/vue'
</script>

<template>
  <ContextMenu>
    Place your context menu here.
  </ContextMenu>
</template>

2. React

import { ContextMenu } from '@contextmenu/react'

function App() {
  return (
    <ContextMenu>
      Place your context menu here.
    </ContextMenu>
  )
}

Please refer to the documentation for more details.

Current NPM Version

package name	version
@contextmenu/core
@contextmenu/vue
@contextmenu/react
@contextmenu/shared

License

MIT License © 2023 vaakian