JSPM

  • Created
  • Published
  • Downloads 1207
  • Score
    100M100P100Q119769F
  • License MIT

A quickly and easy way to do a form with react hooks

Package Exports

  • rapid-form

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (rapid-form) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Rapid React Form

npm

A React hook to manage your form rapidly and easily.

Installation

The rapid form is available as npm package

  # NPM
  npm install rapid-form

  # YARN
  yarn add rapid-form

Quick Start

import useRapidForm from 'rapid-form'

function App() {
  const {
    errors,
    validation,
    handleSubmit,
    reset, // not required
    submitValidation // not required
  } = useRapidForm()

  const s = (values, err, e) => {
    if (_.isEmpty(err)) {
      reset(e)
    }
  }

  return (
    <form
      id="rapidForm"
      ref={submitValidation}
      autoComplete="off"
      onSubmit={handleSubmit(s)}
    >
      <input name="username" ref={validation} placeholder="Username" required />
      {errors.username?.message}
      // OR
      {errors.username && yourI18Label[errors.username.code]}
      <label>Email:</label>
      <input name="email" type="email" ref={validation} required />
      {errors.email?.message}
      <label>Age:</label>
      <input name="age" ref={validation} required pattern={/\d+/} />
      {errors.age?.message}
      <button type="submit">Submit</button>
    </form>
  )
}

Error handler

Our error object is made as follows:

{
  [fieldName: string]: {
    error: boolean,
    message: string,
    code: 'VALIDATION_ERROR' | 'EMPTY_ERROR'
  }
}

API

  • errors: An object with all errors

  • validation: A function to control each field (only with required attribute)

  • handleSubmit: A function to put your submit callback. (params: (values, errors, event))

  • reset: A simple way to reset the form

  • submitValidation: A function to add a plus fields control to the submit event

Would you like to offer me a ☕️?

Become a patron

License

This repository is published under the MIT license.