https://github.com/violentmonkey/vm-ui

Common UI for userscripts.
https://github.com/violentmonkey/vm-ui

userscript violentmonkey

Last synced: 9 days ago
JSON representation

Common UI for userscripts.

• Host: GitHub
• URL: https://github.com/violentmonkey/vm-ui
• Owner: violentmonkey
• License: mit
• Created: 2019-04-29T05:17:02.000Z (over 5 years ago)
• Default Branch: master
• Last Pushed: 2024-04-01T14:20:21.000Z (8 months ago)
• Last Synced: 2024-10-31T08:42:00.440Z (16 days ago)
• Topics: userscript, violentmonkey
• Language: TypeScript
• Homepage: https://violentmonkey.github.io/vm-ui/
• Size: 184 KB
• Stars: 16
• Watchers: 4
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# @violentmonkey/ui

[![NPM](https://img.shields.io/npm/v/@violentmonkey/ui.svg)](https://npm.im/@violentmonkey/ui)

![License](https://img.shields.io/npm/l/@violentmonkey/ui.svg)

Common UI for userscripts, working in Violentmonkey as well as other userscript managers.

## Dependencies

- [@violentmonkey/dom](https://github.com/violentmonkey/vm-dom)

## Usage

First, include dependencies:

```js

// ...

// @require https://cdn.jsdelivr.net/combine/npm/@violentmonkey/dom@2,npm/@violentmonkey/[email protected]

// ...

```

Then use it like so, all exports can be accessed under namespace `VM`:

```js

VM.showToast('hello');

VM.showToast(VM.h('div', {}, 'hello, world'));

```

### Toast

```js

const toast = VM.showToast(VM.h('div', {}, 'hello'), {

  theme: 'dark', // or 'light'

  duration: 2000, // or 0 to manually close it

});

// Manually close it

toast.close();

```

### Panel

```js

const panel = VM.getPanel({

  content: VM.h('div', {}, 'This is a panel'),

  theme: 'light',

});

panel.wrapper.style.top = '100px';

// Show panel

panel.show();

// Hide panel

panel.hide();

// Allow panel to be moved by mouse dragging

panel.setMovable(true);

```

### SolidJS

It is recommended to initialize a userscript project using [generator-userscript](https://github.com/violentmonkey/generator-userscript) and use [solid-js](https://solidjs.com/).

```js

import { render } from 'solid-js/web';

const panel = VM.getPanel({ theme: 'light' });

panel.wrapper.style.top = '100px';

render(() => , panel.body);

panel.show();

```

### JSX for @violentmonkey/dom

**Not recommended** as it is not compatible with [solid-js](https://solidjs.com/) integrated in [generator-userscript](https://github.com/violentmonkey/generator-userscript).

Use with JSX and bundlers, for example:

```js

// .babelrc.js

{

  plugins: [

    // JSX

    ['@babel/plugin-transform-react-jsx', {

      pragma: 'VM.h',

      pragmaFrag: 'VM.Fragment',

    }],

  ],

}

```

```js

VM.showToast(
hello, world
);

```


## API

[![jsDocs.io](https://img.shields.io/badge/jsDocs.io-reference-blue)](https://www.jsdocs.io/package/@violentmonkey/ui)