A Higher Order Component for form validations in React apps. Highly inspired by awesome Formik
With npm:
npm install refova --save
or with Yarn:
yarn add refova
Create a Higher Order component.
Default () => ({})
. Refova will transfer its results into updatable form state and make these values available to the new component as props.values
.
Default {}
. Validation rules per each value in values
. Rule is a simple object:
{
message: string | (value, payload) => string,
test: (value, payload) => boolean
}
For example for values === { email: '', password: '' }
we can define next validations:
{
email: [
{ message: 'Is required', test: value => value.length > 0 },
{ message: 'Not valid email address', test: value => value.includes(@) }
],
password: [
{ message: 'Is required', test: value => value.length > 0 }
]
}
Defaul true
. Reset Refova state when props was changed.
Default false
. Validate values
on initial mount and after reset.
Default () => {}
. Callback for handleSubmit
.
Payload:
values
changed
props
setValue
setValues
resetError
reset
Updates target value and validate state.
Updates target value without validations.
Prevents default submit behavior. Validates values
and calls submit
if they are valid
Updates value by given key. By default will validate updated value (can be disabled by provided validate?: false
).
Callback will be passed to React.Component::setState()
.
Updates multiple values and validates them. Callback will be passed to React.Component::setState()
.
Resets one or multiple errors.
Callback will be passed to React.Component::setState()
.
Validates one or multiple values. If keys
argument omitted, then all values
will be validated.
Returns true
if values
are valid, othervise false
Callback will be passed to React.Component::setState()
.
Resets Refova state. If nextProps
is provided, then resets state according to new props.
Can be usefull when option resetWhenPropsChange
is disabled, and you need to
manually reset Refova state when component receive new props.
Callback will be passed to React.Component::setState()
.