React Use Formboi

A dead simple react hook to manage forms.

Note: You need React v16.7.0-alpha for this to work.

Installation

Install it as any other package:

npm install react-use-form

Usage

It's so simple that an example is enough to show all the functionality:

import { useFormboi } from 'react-use-form';


function _handleSubmit(values, setErrors) {
  return (e) => {
    e.preventDefault();
    const errors = {};
    if (values.firstName === '') {
      errors.firstName = 'Cannot be blank';
    }
    if (values.lastName === '') {
      errors.lastName = 'Cannot be blank';
    }
    if (Object.keys(errors).length > 0) {
      return setErrors(errors);
    }
    // do something with values
  };
}


const App = () => {
  const { values, errors, fields, setErrors } = useFormboi({
    firstName: '',
    lastName: '',
  });
  return (
    <div>
      <h1>New User</h1>
      <form onSubmit={_handleSubmit(values, setErrors)}>
        <p>
          <label>First Name</label>
          <input type="text" {...fields.firstName} />
          <span>{errors.firstName}</span>
        </p>
        <p>
          <label>Last Name</label>
          <input type="text" {...fields.lastName} />
          <span>{errors.lastName}</span>
        </p>
        <p>
          <button type="submit">Submit</button>
        </p>
      </form>
    </div>
  );
};


export default App;

License

MIT