Richard

Nov 12, 2021

React.js is incredible

The creation of forms that will capture information from an end-user can be a difficult task because it must take many factors into account, such as: validation of fields, accessibility, maintainability, extensibility, and subject to change, to achieve it in the shortest possible time, with good practices, among others. And it can be more challenging in the case that the form that we wish to develop is extensive, complex, with numerous sections, or involving generating new forms according to user choices.

In Kushki, we perform this work continuously to offer the best user experience in the use of our platform. In this article, we will tell you how we manage to solve all these difficulties for an optimal result in the development of user forms.

What are the technologies and libraries to be used?

It is a library for the construction of user interfaces, which mainly offers the possibility of developing complex web applications with data that changes through time. It adapts very well to our needs to constantly collect information in our different products to update them in our platform, in addition to presenting information that continuously changes in an immediate and consistent way. Some significant characteristics it also offers are: Ease of use, reusability of graphic components, and efficiency when constructing complex interfaces starting from simpler pieces.

They are a new addition to React, allowing to write applications with a functional approach, reducing the amount of code necessary, simplifying the complex components previously developed with classes, to a simpler structure, which allows to abstract and reuse logic in these functions, to achieve components easier to understand and maintain.

It is a programming language that compiles JavaScript, and the reason to use it, is that JavaScript was not thought for the creation of large and complex systems, but for the implementation of dynamic functionalities to a website; that’s why Typescript becomes that fundamental piece for JavaScript to be highly scalable, maintaining a great level of flexibility. When adding strict typing, we achieve a more robust and solid code, allowing our applications to have fewer errors, being easier to test, and greater maintainability through time, so our adoption of this programming language is very high in our set of applications.

It is a library for the construction of forms with React, created with the objective of achieving greater performance and ease when implementing and validating forms.

Some reasons why it is recommended to use React Hook Form are:

With some disadvantages:

How should it be implemented?

React Hook Form is the library used for the construction of the form. In this section, we will focus on describing the development process to carry it out, together with technical explanations that allows to better understand how its adoption can proceed in a project.

1. Define strict form typing

When specifying an interface with the fields the form will have, allows us to maintain an understanding in the working team, providing error detection in compilation time. Below we have an implementation of a simple form interface, that will collect data from a customer.

typescript interface IForm { clientName: string; clientDetails: { email: string; documentType: string; documentNumber: string; } }

2. Initializes the form with the function

This function returns the with which interaction with the API library will take place; it receives a generic typing with the interface that we previously defined, to maintain a strict typing of the form, and we also specified that field validation is with the “onBlur” mode, that is to say, at the moment the element loses the user approach.

typescript export const FormComponent: React.FC = () => { const form = useForm ({ mode: “onBlur”, }); }

3. Wraps the sections of the form with the

This component offered by the library, makes use of React’s , which solves the problem of passing “props” at each level of the component tree, this is specifically useful in complex forms with multiple nested sections. For the implementation, we have defined that the form will have 2 nested sections, the first will capture the customer name, and the second the customer details. In addition to specifying the “handleSubmitForm” function, which will be responsible for processing the data once the user makes a sending of the form.