Conform

Overview:

CONFORM is a form validation library designed for use with the Remix and React Router frameworks. It utilizes a progressive enhancement approach and offers several features to simplify the validation process. This library provides automatic type coercion, simplified integration through event delegation, field name inference, focus management, and accessibility support. CONFORM is lightweight, with a compressed size of approximately 5kb.

Features:

• Progressive enhancement first APIs: CONFORM follows a progressive enhancement approach, allowing developers to easily enhance their forms with validation without sacrificing the basic functionality for users without JavaScript.
• Automatic type coercion with Zod: The library leverages Zod, a powerful runtime type checking library, to automatically coerce the input values based on the defined validation schema.
• Simplified integration through event delegation: CONFORM simplifies the integration process by utilizing event delegation, reducing the need for manual configuration and allowing for a more streamlined development experience.
• Field name inference: This library is capable of inferring field names based on input elements, saving developers from manually specifying them.
• Focus management: CONFORM includes focus management features, ensuring that users are directed to the relevant fields with validation errors for a smoother user experience.
• Accessibility support: The library takes into consideration accessibility best practices, making it easier for developers to create forms that are inclusive and accessible for all users.

Installation:

To install CONFORM, follow these steps:

1. Add the library as a dependency in your project by running the following command:

npm install conform

2. Import the necessary components and functions in your project:

import { useForm, useField } from 'conform';

3. Start using the CONFORM library in your forms by utilizing the provided APIs and hooks.

export function MyForm() {
  const { handleSubmit, values, errors } = useForm({
    // Define your validation schema and rules
    validation: {
      email: {
        required: true,
        email: true,
      },
      password: {
        required: true,
        minLength: 8,
      },
    },
    onSubmit: async (values) => {
      // Handle form submission logic
    },
  });

  const emailField = useField('email');
  const passwordField = useField('password');

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Email:
        <input {...emailField} />
        {errors.email && <p>{errors.email}</p>}
      </label>
      <label>
        Password:
        <input {...passwordField} type="password" />
        {errors.password && <p>{errors.password}</p>}
      </label>
      <button type="submit">Submit</button>
    </form>
  );
}

Summary:

CONFORM is a powerful form validation library that prioritizes progressive enhancement, automatic type coercion, simplified integration, field name inference, focus management, and accessibility support. With a minimal file size and an easy-to-use API, CONFORM enables developers to enhance their forms with robust validation capabilities while ensuring an inclusive user experience.