# modern-context

> A modern, beautiful, and lightweight context menu JavaScript library inspired by Fluent Design.

Latest version **2.0.0** (published 2023-02-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install modern-context
pnpm add modern-context
yarn add modern-context
bun add modern-context
```

## Health

**Score 35/100 (D)** — status: abandoned.

Positive: has types; no vulnerabilities; high quality score.

Warnings: low downloads; no esm support.

Negative: abandoned.

## Facts

| | |
|---|---|
| Version | 2.0.0 |
| Published | 2023-02-17 |
| First published | 2023-02-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 23.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 6 |
| Author | Robot-Inventor |
| Maintainers | robot-inventor |
| Keywords | contextmenu, context-menu, context menu, context, menu, rightclick, right-click |

## Links

- npm: https://www.npmjs.com/package/modern-context
- Repository: https://github.com/Robot-Inventor/modern-context.js
- Homepage: https://github.com/Robot-Inventor/modern-context.js#readme
- Issues: https://github.com/Robot-Inventor/modern-context.js/issues
- npm.io page: https://npm.io/package/modern-context

## Recent versions

- 2.0.0 (latest) — 2023-02-17

## README

# ModernContext.js

A modern, beautiful, and lightweight context menu JavaScript library inspired by Fluent Design.

![screenshot](https://github.com/Robot-Inventor/modern-context.js/blob/main/picture/screenshot_light.png)

## Dark Mode Support

ModernContext.js supports dark mode. If your browser is set to dark mode, the context menu will automatically switch to the black-based design.

![screenshot](https://github.com/Robot-Inventor/modern-context.js/blob/main/picture/screenshot_dark.png)

## Usage

See the [documentation](https://github.com/Robot-Inventor/modern-context.js/blob/main/docs/classes/Context.md) for more information.

### npm

```console
npm install modern-context
```

```typescript
import { Context } from "modern-context";
```

### Browser

```javascript
import { Context } from "./dist/modern-context.min.js"
```

### Example

```typescript
const contents = [
    {
        type: "item",
        label: "Alert",
        callback: () => {
            alert("Clicked!");
        }
    },
    {
        type: "separator"
    },
    {
        type: "item",
        label: "No Callback"
    }
];

const context = new Context("#target", contents);
```

### CSS Custom Properties

| Property              | Default                                                               | Description                             |
| :-------------------- | :-------------------------------------------------------------------- | :-------------------------------------- |
| --mc-text-color       | ``#333333`` (``white`` in dark mode)                                  | Text color in the context menu.         |
| --mc-background-color | ``rgba(255, 255, 255, 0.7)`` (``rgba(51, 51, 51, 0.7)`` in dark mode) | Background color of the context menu.   |
| --mc-corner-radius    | ``0.25em``                                                            | Corner radius size of the context menu. |
| --mc-font-family      | ``sans-serif``                                                        | Font family of text.                    |

## Supported Browsers

The following browsers are supported. ModernContext.js may work in other modern browsers, but I tested only the following browsers.

- Google Chrome
- Mozilla Firefox
- Microsoft Edge

## Development

### Setup

```console
npm install
```

### Build

```console
npm run build
```

### Generate documentation

```console
npm run doc
```

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