Skip to content

Latest commit

 

History

History
94 lines (69 loc) · 3.56 KB

0003-forms.md

File metadata and controls

94 lines (69 loc) · 3.56 KB

Forms and Validation Libraries

2021-11-23

The app needs a consistent pattern for handling form state and basic validation. Several libraries exist to solve this problem, this ADR aims to identify the best suited for our purposes.

Authors

@dauglyon

Status

Draft

Alternatives Considered

Decision Outcome

React Hook Form best suits our need for a flexible solution, with basic validation built in, while also being the smallest option. It also plays well with ARIA and working with custom inputs without requring modification of their implementation.

Consequences

React Hook Form does not work with class components. This may create difficulting in moving code from other (older) react codebases into the app, if we choose to do so. Having basic validation built into the form library doesnt require a decision on complex validation at this stage (when we are still unsure of our needs).

Pros and Cons of the Alternatives

Formik (15kB)

  • + Popular
  • + Wrttien in TypeScript, tsx-friendly
  • + Basic API is concise (when using HTML elements)
  • + Good documentation
  • ? Validation features preference validation library Yup
  • - Requires a signifigant amout of boilerplate when using custom input components not designed without Formik in mind (e.g. if we used a date-picker component from a library)
  • - Straightforward use of custom input components requires modifying the component being used in the form, rather than wrapping it
  • - More complicated features (e.g. custom validation) require lots of boilerplate.
  • - Introduces react (anti?) pattern we don't use elswhere (Function as Child Components)

React Hook Form (8kB)

  • + Very straightforward react-hooks based API
  • + Wrttien in TypeScript, tsx-friendly
  • + Thorough documentation
  • + Basic validation built in.
  • + Supports Yup, Zod, Joi, Superstruct, Vest, and custom validation through a single API (with helpers for each lib).
  • + Uses register pattern which is straightforward for both html input elements, and components that mimic their APIs (onChange, etc)
  • + Has a Controller component to wrap custom input components, making working with custom components pretty straightforward.
  • + Requires fewer mounts than class-component libraries
  • + Use of uncontrolled components makes accessibility (ARIA) more straightforward
  • -? Newer to the scene, smaller community, but still quite popular
  • - Does not work within class components

React Final Form (26kB)

  • + Flexible API for any sort of input component
  • - Even basic examples end up pretty deeply indented/nested
  • - Not react-based, introduces non-react observing/rendering into the app
  • - Large in size, compared to other options considered
  • - No builtin support for validation libraries

References