arktype-hook-form-messages

Arktype resolver for React Hook Form that allows you to set custom error messages for form fields and error types. Supports nested form fields

Installation

Using npm

npm install arktype-hook-form-messages

Using Yarn:

yarn add arktype-hook-form-messages

Using Bun

bun add arktype-hook-form-messages

Usage

import { useForm } from "react-hook-form";
import { arktypeResolver } from "arktype-hook-form-messages";

const schema = type({
  name: "2 < string <= 30",
  email: "string.email",
  phone: /^\+614\d{2} \d{3} \d{3}$/,
  streetAddress: {
    address: "string>0",
    city: "string>0",
    postcode: "4 <= string.integer <= 4",
  }
});

export const MyForm: FC = () => {

  const { register, handleSubmit, formState: { errors } } = useForm({
    resolver: arktypeResolver(schema, {
      "name.required": "Name is required.",
      "name.min": "Name must be at least 2 characters.",
      "name.max": "Name cannot exceed 30 characters."
      "email.requried": "Email is required."
      "email.email": "Please enter a valid email address."
      "phone.required": "Phone is required."
      "phone.pattern": "Please enter a valid phone number."
      "streetAddress.address.required": "Address is required",
      "streetAddress.city": "City is required",
      "streetAddress.postcode.required": "Postcode is required",
      "streetAddress.postcode.min": "Postcode must be 4 characters long",
      "streetAddress.postcode.max": "Postcode must be 4 characters long",
    })
  });

  const onSubmit = (data) => {
    console.log(data);
  };

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <input {...register("name")} placeholder="Name" />
      {errors.name && <p>{errors.name.message}</p>}

      <input {...register("email")} placeholder="Email" />
      {errors.email && <p>{errors.email.message}</p>}

      <button type="submit">Submit</button>
    </form>
  );
}

The resolver retreives messages using a combination key of the field name and error code

Example

"phone.required"

Available error types

These are the supported error types for custom messages

• required
• pattern
• minLength
• maxLength
• exactLength
• predicate
• min
• max
• email
• url
• date
• time
• dateTime
• integer
• float
• boolean
• array
• object
• enum
• union
• intersection
• tuple
• record
• map
• set
• lazy
• nullable
• readonly
• partial
• required
• default
• unknown

About

This project was created using bun init in bun v1.2.1. Bun is a fast all-in-one JavaScript runtime.

License

This project is licensed under the MIT License