# solid-contextmenu

> Add contextmenu to your solid app with ease

Latest version **0.0.2** (published 2022-10-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install solid-contextmenu
pnpm add solid-contextmenu
yarn add solid-contextmenu
bun add solid-contextmenu
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.2 |
| Published | 2022-10-18 |
| First published | 2022-08-22 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 32.2 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 19 |
| Author | Noah Hsu |
| Maintainers | xhofe |
| Keywords | solid, context menu, solid-component, menu, solid-contextmenu, popup |

## Links

- npm: https://www.npmjs.com/package/solid-contextmenu
- Repository: https://github.com/Xhofe/solid-contextmenu
- Homepage: https://github.com/Xhofe/solid-contextmenu#readme
- Issues: https://github.com/Xhofe/solid-contextmenu/issues
- npm.io page: https://npm.io/package/solid-contextmenu

## Dependencies (2)

- [clsx](https://npm.io/package/clsx.md) ^1.2.1
- [mitt](https://npm.io/package/mitt.md) ^3.0.0

## Alternatives

- [react-native-root-siblings](https://npm.io/package/react-native-root-siblings.md) — 102.9K weekly downloads
- [@praxisui/dialog](https://npm.io/package/@praxisui/dialog.md) — 2.0K weekly downloads
- [easy-toggle-state](https://npm.io/package/easy-toggle-state.md) — 350 weekly downloads
- [ngx-lightbox-evp](https://npm.io/package/ngx-lightbox-evp.md) — 19 weekly downloads
- [react-native-modal-translucent-axton](https://npm.io/package/react-native-modal-translucent-axton.md) — 4 weekly downloads

## Recent versions

- 0.0.2 (latest) — 2022-10-18
- 0.0.1-alpha.2 — 2022-08-25
- 0.0.1-alpha.1 — 2022-08-22

## README

<p>
  <img width="100%" src="https://assets.solidjs.com/banner?project=solid-contextmenu" alt="solid-named-router">
</p>

# solid-contextmenu

Inspired by [react-contexify](https://github.com/fkhadra/react-contexify) but for [Solidjs](https://solidjs.com).

[![release](https://github.com/Xhofe/solid-contextmenu/actions/workflows/release.yml/badge.svg)](https://github.com/Xhofe/solid-contextmenu/actions/workflows/release.yml) [![npm](https://img.shields.io/npm/dm/solid-contextmenu.svg)](https://www.npmjs.com/package/solid-contextmenu) [![npm](https://img.shields.io/npm/v/solid-contextmenu.svg)](https://www.npmjs.com/package/solid-contextmenu) [![license](https://img.shields.io/github/license/Xhofe/solid-contextmenu.svg)](https://github.com/Xhofe/solid-contextmenu/blob/main/LICENSE)

## Installation

```bash
pnpm add solid-contextmenu
```

## Demo
<https://xhofe.github.io/solid-contextmenu>

## Usage

```tsx
import { Component, createSignal, For } from "solid-js";
import { Menu, useContextMenu, Item, Separator, Submenu } from ".";

const MENU_ID = 1;
const App: Component = () => {
  const { show } = useContextMenu({ id: MENU_ID, props: "lala" });
  return (
    <div
      style={{
        height: "100vh",
        display: "flex",
        "flex-direction": "column",
        "justify-content": "center",
        "align-items": "center",
        gap: "0.5rem",
      }}
      onContextMenu={(e) => {
        show(e, { props: 1 });
      }}
    >
      <h4>right click</h4>
      <Menu id={MENU_ID} animation={_animation()} theme={_theme()}>
        <Item>⚡ Beautiful</Item>
        <Item>😊 Easy use</Item>
        <Separator />
        <Item>💕 Built with heart</Item>
        <Submenu label="▶️ submenu">
          <Item>👋 Hello</Item>
          <Item>😀 Hello</Item>
          <Item>🤝 你好</Item>
        </Submenu>
        <Item disabled>❌ Disabled</Item>
      </Menu>
    </div>
  );
};
```

---
_Source: https://npm.io/package/solid-contextmenu · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._