@bytesoftio/use-form
Installation
yarn add @bytesoftio/use-form or npm install @bytesoftio/use-form
Table of contents
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>
)
}
Type aliases
ButtonBindingOptions
ButtonBindingOptions: { disableOnSubmit?: undefined | false | true; validate?: undefined | false | true }
Type declaration
-
Optional disableOnSubmit?: undefined | false | true
-
Optional validate?: undefined | false | true
CheckboxBinding
CheckboxBinding: { checked: any; name: string; onChange: (e: any) => void }
Type declaration
-
checked: any
-
name: string
-
onChange: (e: any) => void
FormBindingOptions
FormBindingOptions: { validate?: undefined | false | true }
Type declaration
-
Optional validate?: undefined | false | true
FormInitializer
FormInitializer<TValue, TResult>: (() => ObservableForm<TValue, TResult>) | ObservableForm<TValue, TResult>
Type parameters
InputBinding
InputBinding: { name: string; onChange: (e: any) => void; value: any }
Type declaration
-
name: string
-
onChange: (e: any) => void
-
value: any
RadioBinding
RadioBinding: { checked: any; name: string; onChange: (e: any) => void }
Type declaration
-
checked: any
-
name: string
-
onChange: (e: any) => void
SelectBinding
SelectBinding: { name: string; onChange: (e: any) => void; value: any }
Type declaration
-
name: string
-
onChange: (e: any) => void
-
value: any
SubmitBinding
SubmitBinding: { onSubmit: (e: any) => void }
Type declaration
-
onSubmit: (e: any) => void
SubmitButtonBinding
SubmitButtonBinding: { disabled: boolean; onClick: (e: any) => void }
Type declaration
-
disabled: boolean
-
onClick: (e: any) => void
UseForm
Use
Form: <TValue, TResult>(initialValue: FormInitializer<TValue, TResult>) => ObservableForm<TValue, TResult>
Type declaration
-
- <TValue, TResult>(initialValue: FormInitializer<TValue, TResult>): ObservableForm<TValue, TResult>
-
Type parameters
Parameters
Returns ObservableForm<TValue, TResult>
Functions
Const useForm
- useForm(initialValue: (() => ObservableForm<TValue, TResult>) | ObservableForm<TValue, TResult>): ObservableForm<TValue, TResult>
-
Parameters
-
initialValue: (() => ObservableForm<TValue, TResult>) | ObservableForm<TValue, TResult>
Returns ObservableForm<TValue, TResult>