@codingspark/react-form-toolbox

@codingspark/react-form-toolbox

A small wrapper around react-hook-form to handle form and validation.

Table of contents

• Table of contents
• Installation
• Usage

Installation

Choose your favorite library management system and install

• @codingspark/react-form-toolbox

This package include peer dependencies as listing in package.json. Be sure to have it installed in your development stack.

Usage

This is a wrapper around react-hook-form library which is a popular library to manage form in react.

The point is to add a quick validation to the form data using zod as validation library.

The library take care of injecting yup as an argument so you can quickly build a validation schema

It exposes two primitive:

• useFormWithSchemaBuilder which allows to build a validation schema on the flight.
• useFormWithSchema which allows to use a validation schema defined upfront.

The library also expose some frequent validators

import React from "react";
import { LegalAgeValidator, useFormWithSchemaBuilder } from "@codingspark/react-form-toolbox";

const SandboxPage: React.FC = () => {
  const {
    formState: { errors },
    handleSubmit,
    register,
  } = useFormWithSchemaBuilder((z) =>
    z.object({
      a: z.string(),
      b: LegalAgeValidator({
        youngerThanNow: "You're too young",
      }),
    }),
  );

  return (
    <div className="container mx-auto">
      <h1>Sandbox</h1>
      <form
        className="grid grid-cols-1 place-items-start"
        onSubmit={handleSubmit((data) => {
          console.log(data);
        })}
      >
        <div>
          <input type={"text"} {...register("a")} />
          {errors.a && <p className="text-red-600">{errors.a.message}</p>}
        </div>
        <div>
          <input type={"date"} {...register("b")} />
          {errors.b && <p className="text-red-600">{errors.b.message}</p>}
        </div>
        <button className="border" type="submit">
          Submit
        </button>
      </form>
    </div>
  );
};

export default SandboxPage;