Arktype resolver for React Hook Form that allows you to set custom error messages for form fields and error types. Supports nested form fields
npm install arktype-hook-form-messagesArktype resolver for React Hook Form that allows you to set custom error messages for form fields and error types.
Supports nested form fields
Installation
``sh`
npm install arktype-hook-form-messages
`sh`
yarn add arktype-hook-form-messages
`sh`
bun add arktype-hook-form-messages
`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 (
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
This project was created using bun init in bun v1.2.1. Bun is a fast all-in-one JavaScript runtime.
This project is licensed under the MIT License