Package Exports

rapid-form
rapid-form/lib/index.js

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 Form

The Rapid Form is a React hook to develop an HTML form quickly.

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

values: An object with all values
errors: An object with all errors
validation: A function to control each field (only with required attribute)
values: Object where you can get form values in real-time
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

Contributors

Any contribution is appreciated. You can get started with the steps below:

Fork this repository (learn how to do this here).
Clone the forked repository.
Make your changes and create a pull request (learn how to do this).
I will attend to your pull request and provide some feedback.

Need help?

Ping me on Twitter

License

This repository is licensed under the MIT License.

Don't be shy! 😜

❤️ Sponsor