# tweakpane-declarative

> A declarative interface for Tweakpane

Latest version **1.0.0-beta.7** (published 2022-12-24) · MIT license · 0 weekly downloads

## Install

```sh
npm install tweakpane-declarative
pnpm add tweakpane-declarative
yarn add tweakpane-declarative
bun add tweakpane-declarative
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 1.0.0-beta.7 |
| Published | 2022-12-24 |
| First published | 2022-09-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 9.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Alberto Re |
| Maintainers | albertore |

## Links

- npm: https://www.npmjs.com/package/tweakpane-declarative
- Repository: https://github.com/alberto-re/tweakpane-declarative
- Homepage: https://github.com/alberto-re/tweakpane-declarative#readme
- Issues: https://github.com/alberto-re/tweakpane-declarative/issues
- npm.io page: https://npm.io/package/tweakpane-declarative

## Dependencies (1)

- [tweakpane](https://npm.io/package/tweakpane.md) ^3.1.1

## Recent versions

- 1.0.0-beta.7 (latest) — 2022-12-24
- 1.0.0-beta.6 — 2022-11-01
- 1.0.0-beta.5 — 2022-10-07
- 1.0.0-beta.4 — 2022-10-04
- 1.0.0-beta.3 — 2022-09-30

## README

![CI](https://github.com/alberto-re/tweakpane-declarative/actions/workflows/ci.yaml/badge.svg)

# tweakpane-declarative

A declarative interface for [Tweakpane](https://github.com/cocopon/tweakpane).

# Quick start

First, run `npm install tweakpane-declarative` for your app. Then, in your code:

```js
import { declarePane } from 'tweakpane-declarative';

...
const PARAMS = [
    { button: 'reset', events: [ resetCallback ] },
    { input: 'checkbox', default: false },
    { input: 'quantity', min: 0, max: 100, step: 10,  default: 20 },
    { input: 'point2d', default: { x: 50, y: 25 }, picker: 'inline', expanded: true },
    { input: 'debug', label: 'Debug on/off', default: false },
    { input: 'theme', label: 'Theme', default: 'light', options: { Dark: 'dark', Light: 'light' } },
];

pane = declarePane(PARAMS);
```

## Change events

To declare change events (callbacks) for an input use the _events_ attribute, which must be an array of one or more functions:

```js
const myCallback = function(ev) {
	console.log(`change: ${ev.value}`);
}

const PARAMS = [
	{ input: 'debug', default: false, events: [ myCallback ]},
];
```

## Add a separator between components

Add the SEPARATOR object in the desired position after importing it in the module namespace:

```js
import { declarePane, SEPARATOR } from 'tweakpane-declarative';

const PARAMS = [
    { input: 'checkbox', default: false },
    SEPARATOR,
    { input: 'debug', label: 'Debug on/off', default: false },
];
```

## License

MIT License. See `LICENSE.txt` for more information.

## Authors

- Roberto Pesando <roberto.pesando@gmail.com>
- Alberto Re <alberto.re@gmail.com>

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