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>
  );
};

Contributors

Thanks goes to these people (emoji key)

LICENSE

• MIT