LogoLogo
  • Home
  • Services
    • Fiber
    • Accessor
    • Schema
    • Form
    • Translator
  • Components
    • <Router/>
    • <Memo />
  • Observables
    • Async
    • Value
    • Store
    • List
    • Local Storage Value
    • Local Storage Store
    • Local Storage List
  • Hooks
    • useAsync
    • useAffect
    • useStream
    • useAction
    • useDebounce
    • useThrottle
    • usePrevious
    • useIdle
    • useValue
    • useList
    • useStore
    • useForm
    • useFormBinder
    • useTranslator
    • useQuery
  • Helpers
    • Tag
    • Input Helpers
    • Promise Helpers
    • Save Helpers
    • Pagination Helpers
    • Clipboard Helpers
    • Calendar Helpers
    • Local Storage Helpers
Powered by GitBook
On this page

Was this helpful?

  1. Hooks

useFormBinder

React bindings for the @corets/form package.

PrevioususeFormNextuseTranslator

Last updated 2 years ago

Was this helpful?

Source code is hosted on

yarn add @corets/use-form-binder
npm install --save @corets/use-form-binder

React bindings of vanilla HTML elements for this package:

useFormBinder()

Create an input binder for vanilla HTML input elements:

import React from "react"
import { createForm } from "@corets/form"
import { useForm } from "@corets/use-form"
import { useFormBinder } from "@corets/use-form-binder"

const Example = () => {
  const form = useForm(() => createForm({
    input: "text",
    checkbox: true,
    radio: "second",
    select: "second",
  }))
  const bind = useFormBinder(form)
  
  return (
    <form { ...bind.form() }>
      <input type="text" { ...bind.input("input") } />
      
      <input type="checkbox" { ...bind.checkbox("checkbox") } />
      
      <input type="radio" { ...bind.radio("radio", "first") } />
      <input type="radio" { ...bind.radio("radio", "second") } />
      
      <select { ...bind.select("select") }>
        <option value="first">Option 1</option>
        <option value="second">Option 2</option>
        <option value="third">Option 3</option>
      </select>
      
      <button { ...bind.submit() }>Submit</button>
    </form>
  )
}
GitHub
Form