Merge pull request #79 from LandSprutte/main

Expose formState for children as render prop

README.md

@@ -364,7 +364,7 @@ const formSchema = z.object({
       z.object({
         name: z.string(),
         age: z.coerce.number(),
-      })
+      }),
     )
     // Optionally set a custom label - otherwise this will be inferred from the field name
     .describe("Guests invited to the party"),
@@ -384,7 +384,7 @@ const formSchema = z.object({
       z.object({
         name: z.string(),
         age: z.coerce.number(),
-      })
+      }),
     )
     .describe("Guests invited to the party")
     .default([

src/components/ui/auto-form/index.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { Form } from "@/components/ui/form";
 import React from "react";
-import { DefaultValues, useForm } from "react-hook-form";
+import { DefaultValues, FormState, useForm } from "react-hook-form";
 import { z } from "zod";
 
 import { Button } from "@/components/ui/button";
@@ -49,7 +49,9 @@ function AutoForm<SchemaType extends ZodObjectOrWrapped>({
   onParsedValuesChange?: (values: Partial<z.infer<SchemaType>>) => void;
   onSubmit?: (values: z.infer<SchemaType>) => void;
   fieldConfig?: FieldConfig<z.infer<SchemaType>>;
-  children?: React.ReactNode;
+  children?:
+    | React.ReactNode
+    | ((formState: FormState<z.infer<SchemaType>>) => React.ReactNode);
   className?: string;
   dependencies?: Dependency<z.infer<SchemaType>>[];
 }) {
@@ -82,6 +84,11 @@ function AutoForm<SchemaType extends ZodObjectOrWrapped>({
     }
   }, [valuesString]);
 
+  const renderChildren =
+    typeof children === "function"
+      ? children(form.formState as FormState<z.infer<SchemaType>>)
+      : children;
+
   return (
     <div className="w-full">
       <Form {...form}>
@@ -98,7 +105,7 @@ function AutoForm<SchemaType extends ZodObjectOrWrapped>({
             fieldConfig={fieldConfig}
           />
 
-          {children}
+          {renderChildren}
         </form>
       </Form>
     </div>

src/examples/Array.tsx

@@ -17,7 +17,7 @@ const formSchema = z.object({
       z.object({
         name: z.string(),
         age: z.coerce.number(),
-      })
+      }),
     )
     .describe("Guests invited to the party"),
 });