React UseForm
The react hook useform controller
📦 Install
npm i @olapat/react-useform
Basic
import React, { useCallback } from 'react'
import { useForm, Form } from '@olapat/react-useform'
const Basic = () => {
const form = useForm({
initialValues: {
username: '',
password: '',
repassword: ''
},
rules: {
username: {
required: true
},
password: {
required: true,
isAllowed: {
func: (value) => /^(?=.*d)(?=.*([a-z]|[ก-๙]))(?=.*[A-Z])(?=.*[a-zA-Zก-๙]).{8,}/.test(value),
msg: 'Password is not format'
}
},
repassword: {
required: true,
isAllowed: {
func: (value, values) => value === values.password,
msg: 'Password is not match'
}
}
}
})
const { values, handlerChange, errors } = form
const handlerSubmit = useCallback((values) => {
console.table(values);
}, [])
return (
<Form form={form} handlerSubmit={handlerSubmit}>
<fieldset>
<legend>Username</legend>
<input
type='text'
name='username'
onChange={(event) => handlerChange(event.target.name, event.target.value)}
value={values.username}
/>
<br />
<span>{errors.username}</span>
</fieldset>
<fieldset>
<legend>Password</legend>
<input
type='password'
name='password'
onChange={(event) => handlerChange(event.target.name, event.target.value)}
value={values.password}
/>
<br />
<span>{errors.password}</span>
</fieldset>
<fieldset>
<legend>Confirm Password</legend>
<input
type='password'
name='repassword'
onChange={(event) => handlerChange(event.target.name, event.target.value)}
value={values.repassword}
/>
<br />
<span>{errors.repassword}</span>
</fieldset>
<button type='submit'>
Submit
</button>
</Form>
)
}
Props
UseForm
Props | Options | Required | Description |
---|---|---|---|
initialValues | Object: {[key: string]: any} | true | Set Initial Values Form |
rules | Object: Rules | true | Set Initial Rules Form |
blackList | String[] | false | Field names is set to disabled |
whiteList | String[] | false | Field names is set to enabled |
onValuesUpdate | Function | null | Callback on values form updated |
Controller UseForm
Props | Options | Description |
---|---|---|
values | Object | Values form |
handlerChange | (string: name, value: any) => void | Function to change values |
errors | Object | Errors form |
setValues | (newValues: Object) => void | Function to set values form |
setRules | (newRules: Object) => void | Function to set rules form |
setErrors | (newErrors: Object) => void | Function to set errors form |
handlerReset | (newInitValues: Object) => void | Function to reset values |
Rules
Props | Options | Description |
---|---|---|
required | boolean or string (Message on invalid) | Rule set field to required |
isAllowed | Object: IsAllowed | Rule set field to allow value |
IsAllowed
Props | Options | Description |
---|---|---|
func | (value, values) => boolean | Function is checking value |
msg | String | Message on value not allowed |
License
Copyright (c) 2021-present Olapat. See LICENSE for details.