# sigform

> Nestable react form UI with Signals

Latest version **0.13.18** (published 2024-06-19) · MIT license · 0 weekly downloads

## Install

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

## 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.13.18 |
| Published | 2024-06-19 |
| First published | 2023-08-28 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 3 |
| Unpacked size | 214 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Author | subuta |
| Maintainers | subuta |

## Links

- npm: https://www.npmjs.com/package/sigform
- Repository: https://github.com/subuta/sigform
- Homepage: https://github.com/subuta/sigform#readme
- Issues: https://github.com/subuta/sigform/issues
- npm.io page: https://npm.io/package/sigform

## Dependencies (3)

- [immer](https://npm.io/package/immer.md) ^10.0.2
- [unstated-next](https://npm.io/package/unstated-next.md) ^1.1.0
- [tiny-invariant](https://npm.io/package/tiny-invariant.md) ^1.3.1

## Recent versions

- 0.13.18 (latest) — 2024-06-19
- 0.13.17 — 2024-06-14
- 0.13.16 — 2024-05-02
- 0.13.15 — 2024-04-08
- 0.13.14 — 2024-04-08
- 0.13.13 — 2024-04-08
- 0.13.12 — 2024-04-03
- 0.13.11 — 2024-03-18
- 0.13.10 — 2024-03-14
- 0.13.9 — 2024-03-14
- 0.13.8 — 2024-03-13
- 0.13.7 — 2024-03-13
- 0.13.6 — 2024-02-23
- 0.13.5 — 2024-02-23
- 0.13.4 — 2024-02-15
- … 37 more at https://npm.io/package/sigform/versions

## README

# sigform

Nestable react form UI for allowing developer to construct complex form UI without hassle.

```bash
# For npm
npm i react sigform

# For yarn
yarn add react sigform
```

## How to use

SEE: [example](example/src/pages/index.tsx) For how to use it in Next.js project.

```tsx
import { sigfield } from "sigform";
import React from "react";

export const TextInput = sigfield<{}, string>((props, ref) => {
  const { name, setValue, value } = props;

  return (
          <div className="p-4 bg-red-400" ref={ref}>
            <input
                    name={name}
                    type="text"
                    onChange={(e) => setValue(e.target.value)}
                    value={value}
            />
          </div>
  );
});


// And use it with form wrapper (SigForm).
<SigForm
    onChange={(value, helpers) => {
      console.log("changed!", JSON.stringify(value, null, 2));
    }}
    onSubmit={(data) => {
      console.log("submit!", JSON.stringify(data, null, 2));
        // Will output this data
        // { "email": "hoge@example.com" }
    }}
>
    <TextInput name="email" defaultValue="hoge@example.com" />

    <button type="submit" className="p-1 border rounded">submit</button>
</SigForm>
```

### License

`MIT`, see the [LICENSE](LICENSE) file.

----

With Thanks to awesome OSS developers for inspiration. [unform/unform](https://github.com/unform/unform) / [preactjs/signals](https://github.com/preactjs/signals) / [jamiebuilds/unstated-next](https://github.com/jamiebuilds/unstated-next/tree/master) / [immerjs/immer](https://github.com/immerjs/immer)

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