Introduction

Welcome and thanks for checking out react-form-ally, a React hook that simplifies form handling in React applications. react-form-ally provides developers with a simple and easy-to-use API to manage form state, validation, and submission logic. It is highly customizable, and you can configure it to work with any form validation library or schema. It is also framework-agnostic, and you can use it with any frontend framework or library that supports React.

Flexibility is the main ingredient in react-form-ally. The API allows developers to truly choose the exact strategy necessary for the requirements of building any given form. With user input, you can choose between controlled and uncontrolled strategies, allowing you to reduce the amount of rerendering that tracking input change might induce.

Aside from providing a clear, concise, and granular ways to manage form input state, react-form-ally also provides a flexible way to handle form validation. Validation can be performed on change, blur, or submit, and the hook supports debouncing validation to reduce performance overhead. This means you can track errors on change if required, but ignore rerendering on every keypress. This can seriously improve the overall performance of the form which general equates to a better experience for your end users.

The module itself provides some built it validation, but also ultimately supports a plugin style validation. This allows you to roll your own validation for your particular use case, or you can install one of the companion modules for using third-party validation libraries. Currently this includes both Zod (opens in a new tab) and Yup (opens in a new tab).

Additionally, this hook provides utilities for handling form submission and form resetting, as well as managing individual form fields. Developers can easily set or update form field values, register form fields, and track which form fields have been touched. This makes it easy to build complex forms with your validation requirements while keeping the code readable, maintainable, and performant.

Overall, this hook helps reduce the amount of boilerplate code generally required for form management in a React applications, all while improving code quality, maintainability, and performance. And of course its also written in TypeScript, which means not only will you have gained the confidence of the additional type checking, you will also reap the kind of DX that one should expect from any TS library.

Note:
It's always a good idea to evaluate multiple options before choosing a library or tool for your project. Some factors to consider might include the size and complexity of your project, the specific requirements for your form validation, and the level of customization and control you need over your form validation logic.