2.1.0 • Published 2 years ago

rapid-form v2.1.0

Weekly downloads
21
License
MIT
Repository
github
Last release
2 years ago

NPM npm.io

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:

  1. Fork this repository (learn how to do this here).

  2. Clone the forked repository.

  3. Make your changes and create a pull request (learn how to do this).

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

Sponsor

Don't be shy! 😜

:heart: Sponsor

2.0.3

2 years ago

2.0.2

2 years ago

2.0.5

2 years ago

2.0.4

2 years ago

2.1.0

2 years ago

2.0.1

2 years ago

2.0.0

2 years ago

1.7.0-beta.1

2 years ago

1.6.2

2 years ago

1.6.1

2 years ago

1.6.0

2 years ago

1.5.3

3 years ago

1.5.2

3 years ago

1.5.1

3 years ago

1.5.0

3 years ago

1.4.1

3 years ago

1.4.0

3 years ago

1.3.1

3 years ago

1.3.0

3 years ago

1.2.0

3 years ago

1.0.6

3 years ago

1.1.0

4 years ago

1.0.5

4 years ago

1.0.4

4 years ago

1.0.3

4 years ago

1.0.2

4 years ago

1.0.1

4 years ago

1.0.0

4 years ago

1.0.0-alpha.50

5 years ago

1.0.0-alpha.49

5 years ago