# somehow-input

> some easy interactive svelte components

Latest version **1.2.0** (published 2020-09-18) · MIT license · 0 weekly downloads

## Install

```sh
npm install somehow-input
pnpm add somehow-input
yarn add somehow-input
bun add somehow-input
```

## 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.2.0 |
| Published | 2020-09-18 |
| First published | 2019-01-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 22.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 1 |
| Author | Spencer Kelly |
| Maintainers | spencermountain |

## Links

- npm: https://www.npmjs.com/package/somehow-input
- Repository: https://github.com/spencermountain/somehow-input/
- npm.io page: https://npm.io/package/somehow-input

## Dependencies (1)

- [spencer-color](https://npm.io/package/spencer-color.md) 0.1.0

## Recent versions

- 1.2.0 (latest) — 2020-09-18
- 1.1.0 — 2020-09-07
- 1.0.0 — 2020-05-11
- 0.0.9 — 2019-07-26
- 0.0.8 — 2019-04-25
- 0.0.7 — 2019-02-16
- 0.0.6 — 2019-02-16
- 0.0.5 — 2019-02-16
- 0.0.4 — 2019-02-13
- 0.0.3 — 2019-02-13
- 0.0.2 — 2019-01-30
- 0.0.1 — 2019-01-30

## README

<div align="center">
  <div><b>somehow-input</b></div>
  <img src="https://user-images.githubusercontent.com/399657/68222691-6597f180-ffb9-11e9-8a32-a7f38aa8bded.png"/>
  <div>— part of <a href="https://github.com/spencermountain/somehow">somehow</a> —</div>
  <div>WIP svelte infographics</div>
  <div align="center">
    <sub>
      by
      <a href="https://spencermounta.in/">Spencer Kelly</a> 
    </sub>
  </div>
</div>
<div align="right">
  <a href="https://npmjs.org/package/somehow-input">
    <img src="https://img.shields.io/npm/v/somehow-input.svg?style=flat-square" />
  </a>
</div>
<img height="25px" src="https://user-images.githubusercontent.com/399657/68221862-17ceb980-ffb8-11e9-87d4-7b30b6488f16.png"/>

<div align="center">
  <code>npm install somehow-input</code>
</div>

<div align="center">
**work-in-progress**
</div>

just some plug+play svelte components that I like to use:

### Number

flexible way to select a number within a range

```html
<script>
  let number = 3
</script>
<Number
  bind:number="{index}"
  min="{1}"
  max="{4}"
  hasSlider="{false}"
  hasKeyboard="{false}"
/>
```

![image](https://user-images.githubusercontent.com/399657/92410104-093dbb00-f111-11ea-9de4-227b86aa7a80.png)

### Choice

choose between an array of choices

```html
<script>
  let choices = ['a', 'b', 'c']
  let choice = 'b'
</script>
<Choice bind:choice {choices} />
```

![image](https://user-images.githubusercontent.com/399657/92410241-7c473180-f111-11ea-8101-fcab4b122f1e.png)

### Text

```html
<script>
  let text = 'foo'
</script>
<Text bind:text />
```

### Legend

a color-based legend component

```html
<script>
  let colors = { '#dedded': 'LabelA', red: 'Label2' }
  let selection = null
</script>
<legend bind:selection colors="{colors}" />
```

### Button

just a nice button, nothing else.

```html
<button label="hi" color="red" onClick="{myFn}" />
```

### Tabs

```html
<script>
  let choices = ['a', 'b', 'c']
  let choice = 'b'
</script>
<Tabs bind:choice {choices} />
```

MIT

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