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?

1. Modular - decoupled from your form architecture.
2. Composable - turn your validations and forms into Lego bricks.
3. Extendable - add/modify the API as you see fit
4. Unopinionated - customize your UX to the Moon 🚀
5. Lightweight - compare it on bundlephobia
6. Easy to Use - its all functions
7. Easy to Test - unit test your business logic
8. Yup Compatible - can integrate with your existing yup schemas

Install

yarn add @de-formed/react-validations

npm i @de-formed/react-validations

Basic Usage

Step 1: Define a hook/schema for your validations

1// usePersonValidation.ts
2import { useValidation } from '@de-formed/react-validations';
3
4export const usePersonValidation = () => {
5  return useValidation<Person>({
6    firstName: [
7      {
8        error: 'First Name is required.',
9        validation: ({ firstName }) => firstName.length > 0,
10      },
11    ],
12    lastName: [
13      {
14        error: 'Last Name is required.',
15        validation: ({ lastName }) => lastName.length > 0,
16      },
17    ],
18  });
19};

---

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.

1// PersonForm.component.tsx
2import React from 'react';
3import { usePersonValidation } from './usePersonValidation';
4
5export const PersonForm = ({ person, onChange }) => {
6  const {
7    getError,
8    validateAll,
9    validateOnChange,
10    validateOnBlur
11  } = usePersonValidation();
12
13  const handleSubmit = () => {
14    if (validateAll(person) {
15      // submit logic
16    }
17  };
18
19  return (
20    <>
21      <div>
22        <label>First Name</label>
23        <input
24          name="firstName"
25          onBlur={validateOnBlur(person)}
26          onChange={validateOnChange(onChange, person)}
27          value={person.firstName}
28        />
29        {getError('firstName') && <p>{getError('firstName')}</p>}
30      </div>
31      <div>
32        <label>Last Name</label>
33        <input
34          name="lastName"
35          onBlur={validateOnBlur(person)}
36          onChange={validateOnChange(onChange, person)}
37          value={person.lastName}
38        />
39        {getError('lastName') && <p>{getError('lastName')}</p>}
40      </div>
41      <button onClick={handleSubmit}>Submit</button>
42    </>
43  );
44};

---

Validation Schema

The validation schema is on object that defines a list of validation rules for any given key. Each validation rule consists of the error to display to a user and a function that returns true or false. Error messages can be passed a function to generate dynamic error messages depending on the state of the data. Keys that match the keys of an object will be automatically detected when using validateAll.

1{
2  email: [
3    {
4      error: 'Email is required.',
5      validation: ({ email }) => email.trim().length > 0,
6    },
7    {
8    error: ({ email }) => `${email} must be a valid email.`,
9      validation: ({ email, name }) =>
10        name === 'bob ross' ? email === 'bob.ross@gmail.com' : true
11    },
12  ],
13}
14

---

Auto-Props

Auto-props are functions that apply simple validation rules for strings and numbers.

1type Person = {
2  name: string
3  age: number
4  agreement: boolean
5}
6
7const personValidation = () => {
8  return Validation<Person>({
9    name: [required(), shorterThan(12)],
10    age: [min(42), max(100)],
11    agreement: [is(true, 'Must accept terms.')],
12  })
13}

---

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.