useFom provide a way to create complex forms easily.
React data forms provide a way to create complex forms easily, react data forms provide a hook called
userForm, this hook returns an object of values in the same shape that it receives, this is possible using dot notation. Therefore, it does not matter if the object is complex or has many properties or array, the result is the same. The same process is realized with errors object and touched object.
Don't need the tag form, unless if you want to use uncontrolled inputs.
By default react data forms work with Yup Validation.
The first example of creating forms is a controlled form, useForm receive an initialObject with optional some properties:
onChange: Defines when form state will update.
debounce: Defines a form with debounce values.
initialValues: Defines initial state of form.
validations: Receives a validation schema yup.
In this case I created a form without a
validation and with
onChange option, it is worth mentioning that useForm by default works with uncontrolled inputs.
Uncontrolled inputs provide better performance because they drastically reduce the amount of time render component.
useForm provide a
input function, this function as a link with input and a object property of form state.
|is a void function that accepts a function as a parameter, this function is used when you choose uncontrolled inputs|
|is a void function that change the current value of a specific input, this function receives two parameters, the first parameter is the name of input and the second is de new value.|
|is a void function that change the current state of form, this function receives the new value of form as a parameter.|
|is a void function that reset form for the initial state.|
|is a void function that resets an input for the initial state. That function receives the input name as a parameter.|
|object of values your form.|
|is a function that returns properties for the input component, this function receives the name and type as a parameter or an object with input properties.|
|is a function that returns properties for custom input component like React Select or React Datepicker, this function receives the name and type as a parameter or an object with input properties|
|object of errors your form.|
|object with all inputs present in your form with the boolean value.|
useValidation is a hook validation, that hook receives values of form and a schema validation created by Yup and returns the object errors at every change in values form.
Show your support
Give a ⭐️ if this project helped you!