HookedForm

This component is meant to indicate the tree under it is a form, this will inject a <form> tag for you.

We can pass several options to this component where only onSubmit is mandatory.

import { HookedForm } from 'hooked-form';

const MyForm = () => {
  return (
    <HookedForm onSubmit={console.log} />
  )
}

Other options

name	type-signature	description
enableReinitialize	boolean	Indicates that a change in InitialValues should trigger a reset in formValues
initialErrors	object	The errors to be used to initialize the formerrors
initialValues	object	The values to be used to initialize the formstate
noForm	boolean	Whether or not to render a <form> tag for the user
onError	(result: any, callbag: ErrorBag) => void	This callback will be executed when the onSubmit results in an erroneous situation
onSuccess	(result: any, callbag: SuccessBag) => void	This callback will be executed when the onSubmit results in an success
onSubmit	(values: Partial, callbag: CallBag) => Promise	The callback to be executed when a submit-event bubbles up
shouldSubmitWhenInvalid	boolean	Indicates the form should submit even when validate returns errors
validate	(values: Partial) => object	This will validate your values and expects an object back, an empty object implies no errors
validateOnBlur	boolean	Whether or not to call validate when blurring the form field
validateOnChange	boolean	Whether or not to call validate when changing the form field

Every additional prop will be used for the <form> tag this way you can apply className, ...

So for example:

import { HookedForm } from 'hooked-form';
import styled from 'styled-components';

const StyledForm = styled(HookedForm)`
  background: blue;
`;

const MyForm = () => {
  return (
    <StyledForm onSubmit={console.log} />
  )
}

Will apply the style to that form-element.

CallBag: carries the props, setErrors and setFormError functions. SuccessBag: carries the resetForm function. ErrorBag: Carries the setErrors and setFormError functions

This component can also be called as a render function which will give you:

const Form = () => (
  <HookedForm onSubmit={console.log}>
    {({ change, formError, isDirty, isSubmitting, handleSubmit, resetForm }) => (<form onSubmit={handleSubmit} />)}
  </HookedForm>
)