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

• [x] Core

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

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

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

• [x] React

  • [x] useContextMenu hook
  • [x] <ContextMenu /> component
  • [x] <MenuGroup /> and <MenuItem /> component

• [ ] Angular(pending)

• [ ] Vanilla JavaScript

  • [ ] Native Web Component
  • [x] JavaScript API

• [ ] Docs

  • [x] Vitepress
  • [ ] Repl Playground

• [x] 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