@de-formed/react-validations

What is De-Formed?

De-Formed is a library for designing modular, event-driven form and data validations. Bind the things you need; ignore the things you don't. De-Formed will take care of the rest so that you can design your architecture the way you want to.

Why Use De-Formed?

• Modular - decoupled from your form architecture.
• Composable - turn your validations and forms into Lego bricks.
• Extendable - add/modify the API as you see fit
• Unopinionated - customize your UX to the Moon 🚀
• Lightweight - compare it on bundlephobia
• Easy to Use - its all functions
• Easy to Test - unit test your business logic

Install

yarn add @de-formed/react-validations

npm i @de-formed/react-validations

Basic Usage

Step 1: Create a file to define your validations.

// usePersonValidation.ts
import { useValidation } from '@de-formed/react-validations';

export const usePersonValidation = () => {
  return useValidation<Person>({
    firstName: [
      {
        error: 'First Name is required.',
        validation: ({ firstName }) => firstName.length > 0,
      },
      {
        error: 'First Name cannot be longer than 20 characters.',
        validation: ({ firstName }) => firstName.length <= 20,
      },
    ],
    lastName: [
      {
        error: 'Last Name is required.',
        validation: ({ lastName }) => lastName.length > 0,
      },
      {
        error: 'Last Name cannot be longer than 20 characters.',
        validation: ({ lastName }) => lastName.length <= 20,
      },
      {
        error: ({ lastName }) =>
          `${lastName} must be Ross if fist name is Bob.`,
        validation: ({ firstName, lastName }) => {
          return firstName === 'Bob' ? lastName === 'Ross' : true;
        },
      },
    ],
  });
};

Step 2: Use the hook anywhere.

Bind the things you need; ignore the things you don't. De-Formed will take care of the rest.

// PersonForm.component.tsx
import React from 'react';
import { usePersonValidation } from './usePersonValidation';

export const PersonForm = ({ person, onChange }) => {
  const {
    getError,
    validateAll,
    validateOnChange,
    validateOnBlur
  } = usePersonValidation();

  const handleSubmit = () => {
    if (validateAll(person) {
      // submit logic
    }
  };

  return (
    <>
      <div>
        <label>First Name</label>
        <input
          name="firstName"
          onBlur={validateOnBlur(person)}
          onChange={validateOnChange(onChange, person)}
          value={person.firstName}
        />
        {getError('firstName') && <p>{getError('firstName')}</p>}
      </div>
      <div>
        <label>Last Name</label>
        <input
          name="lastName"
          onBlur={validateOnBlur(person)}
          onChange={validateOnChange(onChange, person)}
          value={person.lastName}
        />
        {getError('lastName') && <p>{getError('lastName')}</p>}
      </div>
      <button onClick={handleSubmit}>Submit</button>
    </>
  );
};

Getting Started

Guided walkthrough of how to customize De-Formed to the moon 🚀

Documentation

API documentation.

Examples

More examples and CodeSandboxes.

License

This project is licensed under the terms of the MIT license.