React plain form
React simple form for everyday usage 😜
Demo
Example
;;; { const fields values isValidating errors } = ; const isErrors = !!Objectlength; const handleSubmit = { e && e; console; }; return <form onSubmit=handleSubmit> <label> Name <input ...fieldsname /> errorsname && <span>errorsname</span> </label> <br/> <button type="submit" disabled=isValidating || isErrors > Submit </button> </form> ;} const formSchema = name: type: 'text' valuesnamelength ? : ; ;
API
useForm({ schema })
Name | Type | Defaults | Description |
---|---|---|---|
schema |
Object |
undefined |
Configuration object for you form |
schema[key] |
String |
undefined |
name prop for future input field |
schema[value].[any] |
Object |
undefined |
Any valid html5 attributes |
schema[value].onValidate |
Function |
undefined |
validation function. Get values as argument and should return Promise. |
schema[value].validateOn |
String or Array |
change |
Validation run on this events. Variants: change focus blur |
schema[value].defaultValue |
String |
'' |
Default value |
const {...} = useForm({ schema })
Name | Type | Description |
---|---|---|
fields |
Object |
Same as schema above, but enriched with aditions methods like onChange etc. To make input controllable. |
values |
Object |
Key, value pairs with name of your input and it current value. |
errors |
Object |
Key, value pairs with name of your input and it current value. |
isValidating |
Boolean |
Indicator, Does form is in validating state right now or not. |
setError |
Function |
Set error for field. setError(name, value) . |
setValue |
Function |
Set value for field. setValue(name, value) . |
validateAll |
Function |
Run all onValidate concurrently. Returns promise. Usefull to run validation on submit |
updateFields |
Function |
Want to add fields dynamically, pass as argument to this function new created or extended schema |