A React hook for managing form state using any standard schema compliant validation library.
npm install use-standard-schemauseStandardSchema wraps a Standard Schema-compliant form definition (e.g. Zod, Valibot, ArkType, etc.) into a React hook for form handling. It streamlines validation, state, error handling, and submission with type safety via the Standard Schema interface.
"address.street1")
bash
npm install use-standard-schema
or
yarn add use-standard-schema
or
pnpm add use-standard-schema
`
---
Usage
Define your form once with defineForm, then consume it inside a component with useStandardSchema.
`tsx
import { defineForm, useStandardSchema, type TypeFromDefinition } from "use-standard-schema"
import * as z from "zod"
const subscriptionForm = defineForm({
email: {
label: "Email",
validate: z.email("Enter a valid email address"),
defaultValue: "", // optional
description: "We'll send occasional updates.", // optional
},
})
function onSubmitHandler (values: TypeFromDefinition) {
console.log("Submitted:", values)
}
export function SubscriptionPage() {
const { getForm, getField } = useStandardSchema(subscriptionForm)
const formHandlers = getForm(onSubmitHandler)
const email = getField("email")
return (
)
}
`
- getForm(onSubmit): Returns event handlers for the