furious-luke / react-weaver

React forms that are good at nesting.

React Weaver

React Forms that are good at nesting.

• Designed with controlled inputs in mind.
• Minimal rerendering, especially with deep nesting.
• Tiny bundle size.

The Sociable Weaver is particularly good at nesting, just like React Weaver.

Examples

You can run the examples with:

yarn examples

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

Basic example

import {useForm} from 'react-weaver'

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

Nesting

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

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

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>
  )
}