Skip to main content

Form

The Form library is a collection of components and hooks which deal with both the data management and UX/UI of forms. It handles connecting a field's data with it's input and provides abstractions for the input to send it's data back up to the form.

This library supports custom validation however has extra features when using the @rexlabs/validation library.

Installation​

$ yarn add @rexlabs/form

Usage​

import {
  useForms,
  useField,
  useFieldArray,
  useReactFormsContext,
  formAtom,
  formSelector,
  ReactForms,
  MultiForm,
  FieldArray,
  Form,
  Field,
  HiddenField,

  // types
  ReactFormsProps,
  UseFieldOptions,
  FieldInput,
  FieldMeta,
  FieldActions
} from '@rexlabs/form';

Why?​

Managing form state is deceptively complex and only gets worse the larger the form becomes. This complexity is then multiplied by every new form added to the system. Breaking out the core state management simplifies form creation and allows developers to focus on business logic instead of implementing another error state handler. Creating abstractions around form state also allow for adding advanced functionality, like tracking touched and dirty states, very cheaply.

Why not use a third party library?​

The Rexlabs applications have some extra requirements that aren't supported by third parties (or at least they weren't mid 2020).

  • Combining multiple forms' state up into a single provider to be managed all at once
  • Specific rules around what is considered to be a dirty field, so that we don't show field level errors as people are tabbing through required fields before they have changed the fields or submitted the form
  • Showing global errors above the forms + having the field error styling still apply

Guides​

API reference​