Create Form Generator

A Type-Safe, Dynamic Form Generator React Component

An easy way to build type-safe forms with dynamic fields and validations. This component is built on top of react-hook-form and Zod, and uses shadcn-ui components for styling.

This cli tool is used to generate the form generator component files in your project.

Features

• Single source of truth
• Type-safety
• Dynamically generated fields
• Flexible validations
• Minimal setup

Supported Fields

• Text
• Number
• Select
• Checkbox
• Date Picker

You can try out the example at form-generator

Why?

Writing forms is tedious and repetitive. While react-hook-form is a great library, it usually results in a lot of repetitive code, and making a reusable type-safe component out of it is a bit complicated. This project aims to solve this problem by providing a reusable form generator component The component can also be used to dynamically build forms with type-safety, type inference/ts-autocomplete, and flexible validations.

A form to generate forms.

You can create user-generated forms as shown in the example where a form is used to generate fields for another form.

How?

The way you use the component is by passing an array of objects that describe the fields of the form to a class. You can use the schema and default values provided by the class to initialize your form using react-hook-form.

The field object is of type FieldDataType and looks like this:

1type FieldDataType = {
2  name: string;
3  label: string;
4  type: FieldType;
5  default: defaultValueTypes;
6  schema: z.ZodType;
7  options?:
8    | readonly string[]
9    | readonly { value: string | number; label: string }[];
10  hidden?: boolean;
11  className?: string;
12};

Creating the form should look like this:

1// Define your form fields
2const formData: FieldDataType[] = [ /*...*/ ];
3
4function FormExample() {
5...
6// Initialize the form generator
7const formGenerator = new FormGenerator<typeof formData>(formData)
8
9const schema = z.object(formGenerator.schema)
10
11type SchemaType = z.infer<typeof schema>
12
13// Create a react-hook-form form instance
14const form = useForm<SchemaType>({
15  resolver: zodResolver(schema),
16  defaultValues: formGenerator.defaultValues,
17  })
18...
19}

And inside the tsx you can pass the fields like this:

1return (
2  ...
3  <form>
4    {formGenerator.fields(form)}
5  </form>
6  ...
7)

Installation

The form generator uses shadcn-ui components. Initialize shadcn-ui

1npx shadcn-ui init

Add the following shadcn-ui components. The form component installs all the necessary dependencies (react-hook-form, zod, and @hookform/resolvers) required by the form-generator component.

1npx shadcn-ui add form label 

Add the following components depending on the fields you want to use.

• Text
  • input
• Select
  • select
• Textarea
  • textarea
• Checkbox
  • checkbox
• Date Picker
  • calendar
  • popover

1npx shadcn-ui add select checkbox input textarea calendar popover

Add the form-generator component

1npx create-form-generator

Example Usage

1import { z } from 'zod'
2import { useForm } from 'react-hook-form'
3import { zodResolver } from '@hookform/resolvers/zod'
4
5import { FormGenerator, FieldType, emptyToUndefined } from '@/components/form-generator'
6
7import { Button } from '@/components/ui/button'
8
9const formData = [
10  {
11    name: 'name',
12    label: 'Name',
13    type: FieldType.Text,
14    className: "md:col-span-2",
15    default: "John Doe",
16    schema: z.preprocess(emptyToUndefined, z.string()),
17  },
18  {
19    name: 'email',
20    label: 'Email',
21    type: FieldType.Text,
22    className: "md:col-span-2",
23    default: "john@doe.com",
24    schema: z.preprocess(emptyToUndefined, z.string().email()),
25  },
26  {
27    name: 'date-of-admission',
28    label: 'Date of Admission',
29    type: FieldType.DatePicker,
30    className: "md:col-span-2",
31    default: new Date(),
32    schema: z.date(),
33  },
34  {
35    name: 'age',
36    label: 'Age',
37    type: FieldType.Number,
38    className: "md:col-span-2",
39    default: 18,
40    schema: z.preprocess(
41      emptyToUndefined, 
42      z.preprocess(
43        (v) => Number(v), 
44        z.number().min(18)
45      )
46    ),
47  },
48] as const;
49
50function FormExample() {
51  const formGenerator = new FormGenerator<typeof formData>(formData)
52
53  const schema = z.object(formGenerator.schema)
54
55  type SchemaType = z.infer<typeof schema>
56
57  const form = useForm<SchemaType>({
58    resolver: zodResolver(schema),
59    defaultValues: formGenerator.defaultValues,
60  })
61
62  const onSubmit = (data: SchemaType) => {
63    console.log(data)
64    form.reset()
65  }
66  
67  return (
68    <form onSubmit={form.handleSubmit(onSubmit)}>
69      <div className="grid gap-x-3 md:grid-cols-4">
70        {formGenerator.fields(form)}
71      </div>
72      <div className="flex justify-end py-5">
73        <Button
74          type="submit"
75          className="rounded-md px-12 py-2 font-medium"
76          disabled={form.formState.isSubmitting}
77        >
78          Save
79        </Button>
80      </div>
81    </form>
82  )
83}

License

MIT License checkout the license file.