useFormBee

This is a react form handler

The problem

Handling forms in react can be a little bit tedious especially for new beginners like me 😃. I often find myself re-writing the same stateful logic and form validations, especially when I have different forms in different components (such as signup, login, profile update form).

Inspiration

My mentor @benfluleck suggested I abstract my form logic so that it can easily be reusable. I created a useForm hook and showed it to him and my other colleague. To my surprise, they loved it and adviced that I made some improvements on it and also upload it to npm as a library.

The solution

useFormBee is a custom react hook that helps me manage and abstract form logic.
Form logic such as

values
onChange
onSubmit
onReset

Harnessing the power of validatorjs, I integrated validations to the useForm hooks.

Installation

This module is distributed via npm

npm install useformbee

Usage

Import

import useFormBee from 'useformbee';

const { values, errors, handleChange, handleSubmit, handleReset } = useFormBee({ callback, rules });

Parameter

useformbee takes an object as its parameter. The object parameter must have two attribute callback and rules.

The callback is the function that will be called when the form is submitted and passes all validation.
The rules is an object of validatorjs rules

Returns

useformbee returns an object of 5 attributes.

values (object)
errors (object)
handleChange (function)
handleSubmit (function)
handleReset (function)

Form Example

const Form = () => {
  // prepare your inputs rules
  // read more about validatorjs rule -> https://www.npmjs.com/package/validatorjs
  const rules = {
    firstName: 'alpha|required',
    age: 'numeric',
  };

  // create you callback function
  const saveFormData = (values) => {
    // ...your logic
  };

  const {
    values, handleChange, handleSubmit, errors, handleReset,
  } = useFormBee({ callback: saveFormData, rules });

  // destructure field values

  // the values is created from Object.keys(rules)
  const { firstName, age } = values;

  return (
    <form onSubmit={handleSubmit} onReset={handleReset}>
      <input
        type='text'
        value ={firstName}
        onChange={handleChange}
        name='firstName'
        required
      />

      {/* display username error  if there is an error */}
      {errors.firstName && <p>{errors.firstName }</p>}
      <br />
    
      <input
        type='text'
        value ={age}
        onChange={handleChange}
        name='age'
      />

      {/* display age error  if there is an error */}
      {errors.age && <p>{errors.age}</p>}
      <br />

      <button type='submit'>Submit</button>
      <button type='reset'>Reset</button>
    </form>
  );
};