React hooks based form validation made for humans

by React

Formalizer

Formalizer is a React Hooks based form validation library made for humans. The cleanest code or your money back ;)

Simple, tiny, extensible, intuitive, documented, fully tested, magical.

Installation

yarn add formalizer

or

npm install formalizer --save

Sample Usage

import { useFormalizer } from 'formalizer';

const UserProfileComponent = () => {
  const { formRef, useInput, errors, isValid } = useFormalizer();

  return (
    <form ref={formRef}>
      <input {...useInput('name', ['isRequired'])} />
      <span>{errors['name']}</span>

      <input {...useInput('email', ['isRequired', 'isEmail'])} />
      <span>{errors['email']}</span>

      <button disabled={!isValid} type="submit">
        Submit
      </button>
    </form>
  );
};

For a complete guide on how each of these pieces work, see our tutorial.

In a Nutshell

Use the useFormalizer hook to gain access to the useInput hook, the errors currently in your form, whether the form is valid or not and more.

Then, use the useInput to setup validations on your form inputs.

Formalizer offers two built in validators out-of-the-box and it integrates with the awesome validator library seamlessly, which means if you install it you can use all of their validators.

But know that writing your own custom validators is super easy.

Also, you may create global validators so that they accessible throughout your app. Doing so helps keep your code DRY and facilitates maintaining it.

Finally, if you use Material UI you may like the fact Formalizer integrates with it. If you use some other UI framework, chances are you can tweak our settings to make it work with it.

Contributing

Contributions are very welcome!

We follow the "fork-and-pull" Git workflow.

  1. Create a Fork and clone it

    Simply click on the “fork” button of the repository page on GitHub.

    The standard clone command creates a local git repository from your remote fork on GitHub.

  2. Modify the Code

    In your local clone, modify the code and commit them to your local clone using the git commit command.

    Run npm test and make sure all tests still pass.

    Run tslint --project . and make sure you get no warnings.

  3. Push your Changes

    Make sure to update affected tests and/or add tests to any new features you may have created.

    We are very careful to make sure coverage does not drop.

  4. Create a Pull Request

    We will review your changes and possibly start a discussion.

    If changes are required, you can simply push these changes into your fork by repeating steps #3 and #4 and the pull request is updated automatically.

GitHub