# katachi

> The simplest React form component **ever**!

Latest version **0.1.4** (published 2020-05-05) · MIT license · 0 weekly downloads

## Install

```sh
npm install katachi
pnpm add katachi
yarn add katachi
bun add katachi
```

## Health

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

Positive: has types; esm support; no vulnerabilities; high quality score.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.4 |
| Published | 2020-05-05 |
| First published | 2020-02-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 0 |
| Unpacked size | 28.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Daniel Griffiths |
| Maintainers | daniel-griffiths |

## Links

- npm: https://www.npmjs.com/package/katachi
- npm.io page: https://npm.io/package/katachi

## Recent versions

- 0.1.4 (latest) — 2020-05-05
- 0.1.3 — 2020-05-05
- 0.1.2 — 2020-02-25
- 0.1.1 — 2020-02-24
- 0.1.0 — 2020-02-24

## README

# Katachi

The simplest React form component **ever**!

## Install

```
npm install katachi
```

Or with Yarn

```
yarn add katachi
```

**Example Usage**

```tsx
// MyCoolForm.tsx

import { Form } from 'katachi';

export const MyCoolForm = () => {
  function handleOnSubmit(data) {
    console.log(data);
  }

  return (
    <Form onSubmit={handleOnSubmit}>
      <input name="name" defaultValue="Daniel" />
      <input name="anime[]" defaultValue="Re: Zero" />
      <input name="anime[]" defaultValue="My Hero Academia" />
      <input name="anime[]" defaultValue="Attack On Titan" />
      <input name="games[first]" defaultValue="Nier Automata" />
      <input name="games[second]" defaultValue="Final Fantasy 7" />
      <input name="games[third]" defaultValue="Smash Bros" />
      <button>Submit</button>
    </Form>
  );
};
```

Submitting the example above would give you:

```ts
{
  name: 'Daniel',
  anime: ['Re: Zero', 'My Hero Academia', 'Attack On Titan'],
  games: {
    first: 'Nier Automata',
    second: 'Final Fantasy 7',
    third: 'Smash Bros',
  },
}
```

Can't get any simpler than that! 😎

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