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

• Basic form validation
• More complex form

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().