@jasperdunn/react-form-hooks v6.0.3

React Form Hooks

Flexible agnostic functions to help you build forms in React

yarn add @jasperdunn/react-form-hooks

Try out a simple form

Play in a sandbox

See the changelog

Why I started the project

After discovering the freedom and power of React hooks, I wanted to create a flexible suite of functions that can help create forms with whichever components we want, however we want!

There are many excellent react form packages out there, however I hadn't yet found one that didn't end up pulling me in a certain direction or way of working.

I wanted to be able to use simple, stateless, controlled components in my forms, utilizing agnostic functions that didn't care which components I used or how they were structured.

What it looks like

JSX components not included.

import { useFormValues, useFormErrors } from "@jasperdunn/react-form-hooks"

export default function MyForm() {
  const { formValues, setInputValue } = useFormValues({
    email: '',
    password: ''
  })

  const {
    formErrors,
    validateForm
  } = useFormErrors({
    email: [required, email],
    password: [required, alphanumeric, value => minLength(value, 6)],
  })

return (
    <form
      onSubmit={event => submit(event, validateForm, formValues, formErrors)}
    >
      <h1>Form with hooks</h1>
      <InputText
        name="email"
        label="Email"
        type="email"
        value={formValues.email}
        onChange={setInputValue}
        error={formErrors.email}
      />
      <InputText
        name="password"
        label="Password"
        type="password"
        value={formValues.password}
        onChange={setInputValue}
        error={formErrors.password}
      />
      <button type="submit">Create some hooks!</button>
    </form>
  )
}

useFormValues

const {
  formValues,
  resetFormValues,
  resetInputValue,
  setInputValue,
  setFormValues
} = useFormValues(initialState)

Where

• formValues - Object where each key is the input name and each value is the input value.
• resetFormValues - Function that resets the form values to the initial state.
• resetInputValue(name) - Function that resets the input value to it's initial state.
• setInputValue(input, value?) - Function that updates an input value via an event handler or passing the new value and the input's name.
• setFormValues(formValues) - Function that updates the form values.

useFormErrors

const {
  formErrors,
  numberOfErrors,
  validateForm,
  validateInputValue,
  clearFormErrors,
  clearInputError,
  setInputError
} = useFormErrors(formValidations)

Where

• formErrors - Object where each key is the form input name, and each value is an error message (string/jsx).
• numberOfErrors - Number of inputs that have errors.
• validateForm - Function that runs validation on the whole form, returns formIsValid (boolean).
• validateInputValue(input, value?) - Function that runs validation on an input, returns inputIsValid (boolean).
• clearFormErrors - Function that clears the form errors.
• clearInputError(input) - Function that clears the error for an input via an event handler or the input's name.
• setInputError(name, error) - Function that sets the error for an input.

formValidations

const formValidations = {
  formInputName: [array, of, validation, functions]
}

• formValidations Where each key is the form input name, and the value is an array of validation functions for that form input.

Each validation function must return a string as the error message or have no return value (undefined).

License

MIT © jasperdunn

This package is created using create-react-hook.