Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/chaseottofy/tiny-context-menu-js
2KB context menu library w/ easy customizability
https://github.com/chaseottofy/tiny-context-menu-js
context-menu library typescript ui-library vanilla-component vanilla-components vanilla-js
Last synced: 26 days ago
JSON representation
2KB context menu library w/ easy customizability
- Host: GitHub
- URL: https://github.com/chaseottofy/tiny-context-menu-js
- Owner: chaseottofy
- License: mit
- Created: 2023-07-20T10:51:08.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2023-07-23T14:43:15.000Z (over 1 year ago)
- Last Synced: 2024-12-04T15:02:56.700Z (about 1 month ago)
- Topics: context-menu, library, typescript, ui-library, vanilla-component, vanilla-components, vanilla-js
- Language: TypeScript
- Homepage: https://www.npmjs.com/package/tiny-context-menu-js
- Size: 1.03 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
## tiny-context-menu-js
* Gzips 2KB
* Zero dependencies
* Light/Dark themes + easy customization
* Type support
* Edge detection, Dynamic Positioning
* Accounts for any page scroll
* Memory and Event Clean-up
* [DEMO (codepen)](https://codepen.io/chaseottofy/pen/vYQaaeq)
*Dark mode*
### Installation
```bash
npm i tiny-context-menu-js
```
### Vanilla js
```javascript
import ContextMenu from "tiny-context-menu-js";
const targetContainer = document.querySelector('.target-container')
const options = [
{ label: 'Item 1', action: () => { console.log('item 1'); } },
{ label: 'Item 2', action: () => { console.log('item 2'); } },
]
ContextMenu(targetContainer, options, 'light').init(); // initialize instance
ContextMenu().destroy(); // remove instance
```
### TypeScript
```javascript
import ContextMenu, { MenuOption } from "tiny-context-menu-js";
const targetContainer = document.querySelector('.target-container') as HTMLElement;
const options: MenuOption[] = [
{ label: 'Item 1', action: () => { console.log('item 1'); } },
{ label: 'Item 2', action: () => { console.log('item 2'); } },
]
ContextMenu(targetContainer, options).init(); // initialize instance (forego theme param for default 'dark')
ContextMenu().destroy(); // remove instance
```
### Options examples
```javascript
// Use svgs within labels:
// Must wrap label value in Array.
// Svg must be defined in first index of Array --> [svg, 'title']
const svg = '';
const items = [
{
label: [svg, "Item Title"],
}
]
```
### Theme examples
```javascript
// Two pre-loaded themes (dark/light)
const theme = 'dark'
const theme2 = 'light'
// Custom Theming - KEYS ARE CASE SENSITIVE
const theme3 = {
background: 'red',
backgroundhover: 'rgba(0, 255, 0, 0.8)',
text: '#eee',
texthover: '#FFFFFF',
scrollthumb: 'hsla(0, 0%, 20%, 0.8 )',
}
```
*Light mode*
### Altering CSS
**CSS comes preloaded**
- If you want to edit the CSS directly, do so in
`"../node_modules/tiny-context-menu-js/dist/context-menu.css"`
### License
This project is licensed under the [MIT License](https://github.com/chaseottofy/tiny-context-menu-js/blob/main/LICENSE)