![]() One downside is that everything that would change a form input behavior needs to live inside the config, like form validation, if the form is disabled, etc. It has the advantage of being able to easily create different variations of the form without touching the React codebase. The config-based architecture meant that we have a JSON file with all the data needed to build the form. We can group fields that have similar behavior/validation together, but we would still end up with a lot of React components. It has the advantage of being simple and flexible but has the disadvantage of having to create a ton of components. We would have 3 different inputs with different names/validation, etc. So, let’s say we needed a field for a user’s first name, last name, and email. The component-based architecture meant that we would have specific input components for basically every field (or almost). The other big question we had to ask ourselves was how we should go about creating all the components? We had 2 architecture ideas: component-based and config-based. It’s the brains of the operation, its job is to orchestrate everything. Basically, Formik is the one who knows everything about form fields. As an example, let’s say you have a data object like this:Īnd Formik will make sure your input values and the data object are in sync. ![]() It also takes care of mapping your data to the right form element by matching the input name with the data key. Formik takes care of the form submission, shows errors, applies validation, sets default values, resets the form, etc. To handle the form, we decided to use Formik. It’s what we now think of as the holy grail of form building: Our criteria for choosing a library was mainly focused on 3 things: The popularity of the library how actively maintained the library was (recent updates, number of collaborators, etc.) the quality of the documentation.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |