Conform Has a Free API That Most Developers Dont Know About

#nextjs #react #webdev #forms

Conform is a type-safe form validation library for React Server Actions with progressive enhancement.

Server Action

"use server";
import { parseWithZod } from "@conform-to/zod";
import { z } from "zod";

const schema = z.object({ email: z.string().email(), password: z.string().min(8) });

export async function signup(prev: unknown, formData: FormData) {
  const submission = parseWithZod(formData, { schema });
  if (submission.status !== "success") return submission.reply();
  await createUser(submission.value);
}

Client

const [lastResult, action] = useActionState(signup, undefined);
const [form, fields] = useForm({ lastResult, onValidate: ({ formData }) => parseWithZod(formData, { schema }) });

<form id={form.id} onSubmit={form.onSubmit} action={action}>
  <input name={fields.email.name} />
  <p>{fields.email.errors}</p>
  <button>Submit</button>
</form>