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

$3

``sh
npm install arktype-hook-form-messages
`

$3

`sh
yarn add arktype-hook-form-messages
`

$3

`sh
bun add arktype-hook-form-messages
`

$3

`tsx
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 (


{errors.name &&

{errors.name.message}

}

{errors.email &&

{errors.email.message}

}

Submit

);
}

`

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

$3

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

$3

This project is licensed under the MIT License