# react-weaver

> React forms that are good at nesting.

Latest version **0.1.1** (published 2023-09-16) · MIT license · 0 weekly downloads

## Install

```sh
npm install react-weaver
pnpm add react-weaver
yarn add react-weaver
bun add react-weaver
```

## Health

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

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

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.1 |
| Published | 2023-09-16 |
| First published | 2020-11-12 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 59.5 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Luke Hodkinson |
| Maintainers | furious.luke |

## Links

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

## Dependencies (1)

- [html-webpack-plugin](https://npm.io/package/html-webpack-plugin.md) ^5.5.3

## Recent versions

- 0.1.1 (latest) — 2023-09-16
- 0.1.0 — 2023-09-16
- 0.0.9 — 2021-02-02
- 0.0.8 — 2020-12-08
- 0.0.7 — 2020-12-08
- 0.0.6 — 2020-12-06
- 0.0.5 — 2020-12-06
- 0.0.4 — 2020-12-06
- 0.0.3 — 2020-12-03
- 0.0.2 — 2020-12-03
- 0.0.1 — 2020-11-12

## README

# React Weaver

![Build status](https://github.com/furious-luke/react-weaver/workflows/Test/badge.svg?branch=master)
[![Test coverage](https://codecov.io/gh/furious-luke/react-weaver/branch/master/graph/badge.svg?token=DHS7UE27MJ)](https://codecov.io/gh/furious-luke/react-weaver)

React Forms that are good at nesting.

 * Designed with controlled inputs in mind.
 * Minimal rerendering, especially with deep nesting.
 * [Tiny bundle size](https://bundlephobia.com/result?p=react-weaver).

The [Sociable Weaver](https://en.wikipedia.org/wiki/Sociable_weaver)
is particularly good at nesting, just like React Weaver.

## Examples

You can run the examples with:

```bash
yarn examples
```

And then navigating to `http://localhost:3000`.

### Basic example

```typescript
import {useForm} from 'react-weaver'

function RegistrationForm() {
  const {fieldProps} = useForm()
  return (
    <form>
      <input {...fieldProps.username} />
      <input type="password" {...fieldProps.password} />
    </form>
  )
}
```

### Nesting

```typescript
import {useForm} from 'react-weaver'

function TopLevelForm() {
  const {fieldProps} = useForm()
  return (
    <form>
      <input {...fieldProps.field0} />
      <input {...fieldProps.field1} />
      <NestedForm {...fieldProps.nestedField} />
    </form>
  )
}

function NestedForm({value, onChange, onError}) {
  const {fieldProps} = useForm({value, onChange, onError})
  return (
    <form>
      <input {...fieldProps.field2} />
      <input {...fieldProps.field3} />
    </form>
  )
}
```

### Array fields

```typescript
import {useForm, useFormArray} from 'react-weaver'

function TopLevelForm() {
  const {fieldProps} = useForm()
  return (
    <form>
      <input {...fieldProps.field0} />
      <input {...fieldProps.field1} />
      <NestedFormArray {...fieldProps.nestedField} />
    </form>
  )
}

function NestedFormArray({value, onChange, onError}) {
  const {formsArray, addForm} = useFormArray({value, onChange, onError})
  return (
    <>
      {formsArray.map(subProps => <NestedForm {...subProps} />)}
      <button onClick={addForm}>Add</button>
    <>
  )
}

function NestedForm({onChange, removeForm}) {
  const {fieldProps} = useForm({value, onChange})
  return (
    <div>
      <input {...fieldProps.field2} />
      <input {...fieldProps.field3} />
      <button onClick={removeForm}>Remove</button>
    </div>
  )
}
```

### Validation with Yup

```typescript
import {useForm} from 'react-weaver'
import * as yup from 'yup'

function TopLevelForm() {
  const {fieldProps} = useForm({
    validator: yup.object().shape({
      field0: yup.string().required(),
    })
  })
  return (
    <form>
      <input {...fieldProps.field0} />
      <input {...fieldProps.field1} />
      <NestedForm {...fieldProps.nestedField} />
    </form>
  )
}

function NestedForm({value, onChange, onError}) {
  const {fieldProps} = useForm({
    value,
    onChange,
    onError,
    validator: yup.object().shape({
      field2: yup.string().required(),
    })
  })
  return (
    <form>
      <input {...fieldProps.field2} />
      <input {...fieldProps.field3} />
    </form>
  )
}
```

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