zod-empty

Generate minimum data from zod schema.

Same motivation as json-schema-empty

All libraries that generate data from a json-schema I could find generate random data that conforms to a json schema. This is nice for testing but is not well-suited for generating default data for forms for example.

Usage

To install zod-empty, run:

1npm install zod-empty

with react-hook-form

Use with react-hook-form like this: (ref. react-hook-form)

// Please check default value for schema here.

1import { useForm } from "react-hook-form";
2import { zodResolver } from "@hookform/resolvers/zod";
3import { z } from "zod";
4import { init /* , empty */ } from "zod-empty";
5
6const schema = z.object({
7  name: z.string().min(1, { message: "Required" }),
8  age: z.number().min(10),
9  hobbies: z.array(z.string()),
10});
11// create default values with zod-empty
12const defaultValues = init(schema); // => { name: "", age: 10, hobbies: [] }
13// or const defaultValues = empty(schema); // => { name: null, age: null, hobbies: [] }
14
15const App = () => {
16  const {
17    register,
18    handleSubmit,
19    formState: { errors },
20  } = useForm({
21    // add default values
22    defaultValues,
23    resolver: zodResolver(schema),
24  });
25
26  return (
27    <form onSubmit={handleSubmit((d) => console.log(d))}>
28      <input {...register("name")} />
29      {errors.name?.message && <p>{errors.name?.message}</p>}
30      <input type="number" {...register("age", { valueAsNumber: true })} />
31      {errors.age?.message && <p>{errors.age?.message}</p>}
32      <input type="submit" />
33    </form>
34  );
35};