This package has been deprecated

Author message:

Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

@jasperdunn/react-form-hooks
TypeScript icon, indicating that this package has built-in type declarations

6.0.3 • Public • Published

React Form Hooks

Flexible agnostic functions to help you build forms in React

npm version npm bundle size MIT license coverage status travis

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.

Package Sidebar

Install

npm i @jasperdunn/react-form-hooks

Weekly Downloads

3

Version

6.0.3

License

MIT

Unpacked Size

97.1 kB

Total Files

25

Last publish

Collaborators

  • jasperdunn