@bytesoftio/use-form

Installation

yarn add @bytesoftio/use-form or npm install @bytesoftio/use-form

Table of contents

• Description
• Form hooks and bindings

Description

This library provides an integration form the @bytesoftio/form package.

Form hooks and bindings

For a React component to properly update upon form state changes, you must first hook the form up. There are several ways on how to consume forms in components.

After consuming a form you must bind it to input fields. This library already ships with a very lightweight binder inside, but you can very easily roll your own binder for your specific ui library. Just take a look on how FormBinder is written - its easy as cake.

Lets take a look on how to use hooks and bindings:

import React from "react"
import {createForm} from "@bytesoftio/form" 
import {useForm, createFormBinder} from "@bytesoftio/use-form"

const formFactory = () => createForm()
const sharedFormInstance = createForm()

const Component = () => {
  const formFromFactory = useForm(formFactory)
  const sharedForm = useForm(sharedFormInstance)
  const formFromInlineFactory = useForm(() => createForm())
  
  const binder = createFormBinder(formFromFactory)
  
  return (
    <form { ...bind.form() }>
    	<input type="text" { ...bind.input("field1") } />
    	
      <input type="checkbox" { ...bind.checkbox("field2") } />
      
      <input type="radio" { ...bind.radio("field3", "value1") } />
      <input type="radio" { ...bind.radio("field3", "value2") } />
      
      <select { ...bind.select("field4") }>
        <option>option 1</option>
        <option>option 2<option>
        <option>option 3<option>
      </select>
          
      <button { ...bind.submit() }>Submit</button>
    </form>
  )
}