@letasonce/react-form-meta

Meta-driven React form generator built on react-hook-form and Zod.

Install

This package is intended to be installed with pnpm. Using npm in a pnpm-based project can cause install errors.

pnpm add @letasonce/react-form-meta react-hook-form @hookform/resolvers zod

Peer dependencies must be present in your project:

| Package | Version | |---------|---------| | react | >=18 | | react-dom | >=18 | | react-hook-form | >=7 | | @hookform/resolvers | >=5 | | zod | >=3.25.0 |

Quick start

"use client";

import { z } from "zod";
import {
  createFormMeta,
  FormGenerator,
  type FieldProps,
} from "@letasonce/react-form-meta";

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

const meta = createFormMeta({
  schema,
  defaultValues: { email: "", role: "" },
  fields: {
    email: {
      name: "email",
      type: "email",
      label: "Email",
      placeholder: "[email protected]",
    },
    role: {
      name: "role",
      type: "select",
      label: "Role",
      options: [
        { label: "Admin", value: "admin" },
        { label: "User", value: "user" },
      ],
    },
  },
  groups: [{ fields: ["email", "role"] }],
});

export function ExampleForm() {
  return (
    <FormGenerator
      meta={meta}
      onSubmit={(data) => console.log(data)}
      components={{
        email: CustomInput,
        select: CustomSelect,
      }}
    />
  );
}

function CustomInput(props: FieldProps) {
  // render your design system input
  return null;
}

function CustomSelect(props: FieldProps) {
  // render your design system select
  return null;
}

API

• createFormMeta(meta) — typed form description
• FormGenerator — renders groups/fields from meta
• FormField, useFormGeneratorContext — building custom field components
• FieldProps, FieldRegistry, defaultFieldRegistry — field customization

License

MIT