Wondering what’s next for npm?Check out our public roadmap! »

    @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.

    Install

    npm i @jasperdunn/react-form-hooks

    DownloadsWeekly Downloads

    7

    Version

    6.0.3

    License

    MIT

    Unpacked Size

    97.1 kB

    Total Files

    25

    Last publish

    Collaborators

    • avatar