It's really good to see you here, on this first page you will see some steps to create forms easily.
Forms are an important part of web applications, and with React it's possible to create greats forms,
react hooks are a game-changer when we think about forms, with hooks is simple to create forms, and you can go on without libraries.
But when we want to build complex forms with nested fields and validations, might be a good idea to use a library, and you can find a lot of libraries to help you to create forms.
So, why UseForm?
There are some reasons why you face problems when you want to create forms, and with useForm, you can solve these problems.
- State management - A couple of years ago, you could think that Redux or MobX was a good solution to manage form state in react, but they weren't. Today you can use hooks to manage the form state, hooks like
useReducerare a good solution to manage the state. But managing values, touched fields and errors could be a problem if you don't have a standard way to manage them. Usually, real applications use nested objects as request payloads, and you should keep it to send the correct data to the server, manage nested values and errors could be a problem using just
- Errors-To deal with errors, you can use your validation solution, and it can work well with simple forms, but you can stuck with a lot of errors when you have nested fields.
- Touched fields - Maybe you want to show a message error just when the field is touched, so in order to do that you need to manage the touched fields, it can be really easy to do with
useReducer, but you can't do that very well with
useReducerwhen you have nested fields.
- Handle submit - When you want to handle submit, you need to manage the submit event, it's convenient when you have an already solution to do that.
UseForm provides a way to create complex forms easily, 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 an array, the result is the same. This process turns very easy to create forms from nested objects, the same layers and properties are replicated in the final object, this approach prevents you to type more code to convert an object from form to backend object type. The same process is realized with errors objects and touched objects.
What to expect with useForm
- Performer forms - useForm provides a way to complete a form and submit it without any rerender, by default useForm creates uncontrolled forms.
- Easy to write - useForm has an easy way to write forms with less code. register function return necessary input's properties and it is all we need to manage all events in a native HTML
input. Writhe forms without form tag.
- Easy validation - By default useForm uses yup validation, we can write complex validation without effort.
bashnpm install --save @use-form/use-form
bashyarn add @use-form/use-form
createForm you can create a hook form and use it wherever you want,