# svelte-knobby-wolfr

> based on svelte-knobby 0.0.8

Latest version **0.0.1** (published 2021-06-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install svelte-knobby-wolfr
pnpm add svelte-knobby-wolfr
yarn add svelte-knobby-wolfr
bun add svelte-knobby-wolfr
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.1 |
| Published | 2021-06-05 |
| First published | 2021-06-05 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM |
| Dependencies | 0 |
| Unpacked size | 12.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | wolfr |

## Links

- npm: https://www.npmjs.com/package/svelte-knobby-wolfr
- npm.io page: https://npm.io/package/svelte-knobby-wolfr

## Recent versions

- 0.0.1 (latest) — 2021-06-05

## README

**Note: in this fork of svelte-knobby, I added a select, radio button and the ability to drag your window around** 

# svelte-knobby

Add knobs to your Svelte apps. [Demo](https://svelte.dev/repl/85c0f69007524dd9a45a8bf72d2401ba)

```svelte
<script>
  import * as knobby from 'svelte-knobby';

  const message = knobby.text('message', 'Hello world!');
</script>

<h1>{$message}</h1>
```

## Knobs

The following functions create a [readable store](https://svelte.dev/tutorial/readable-stores):

```js
const text = knobby.text('my text control', 'text');
const checked = knobby.checkbox('my checkbox control', true);
const color = knobby.color('my color control', '#ff3e00');
const number = knobby.range('my range control', 50, { min: 0, max: 100, step: 1 });
const radio = knobby.radio('my radio control', 'one', { options: ['one','two','three'] });
const select = knobby.select('my select control', 'a', { options: ['a','b','c'] });
```

Controls are added to the control panel when their stores are subscribed to, and removed when there are no more subscribers.

You can also add an _action_, which adds a button to the control panel but does not create a store. If created inside a component's initialisation block it will be destroyed along with the component, otherwise you must manually call the returned `destroy` function:

```js
const destroy = knobby.action('say hello', () => alert('hello!'));
```

## Groups

You can group controls together, even across components. For example your root component might _create_ a group...

```svelte
<!-- App.svelte -->
<script>
  import * as knobby from 'svelte-knobby';
  import Widget from './Widget.svelte';

  knobby.group('widget'); // create new group
  const show_widget = knobby.checkbox('show widget', false);
</script>

{#if $show_widget}
  <Widget/>
{/if}
```

...then another component might _select_ the same group and add controls to it:

```svelte
<!-- Widget.svelte -->
<script>
  import * as knobby from 'svelte-knobby';

  knobby.group('widget'); // select existing group
  const message = knobby.text('message', 'This will appear inside the widget group');
</script>

<h1>{$message}</h1>
```

To exit a group, either create/select a new group (groups cannot be nested) or call `knobby.ungroup()`.

## License

MIT

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