Skip to content

Instantly share code, notes, and snippets.

@shansmith01

shansmith01/gist:c770f78adefe43401f1696e0b3ac023c

Created September 11, 2023 01:12
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save shansmith01/c770f78adefe43401f1696e0b3ac023c to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save shansmith01/c770f78adefe43401f1696e0b3ac023c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. shansmith01 created this gist Sep 11, 2023.
    66 changes: 66 additions & 0 deletions gistfile1.txt
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,66 @@

    const Form = ({ onSubmit, formSchema, defaultValues, children }) => {
    const methods = useForm({ defaultValues, resolver: zodResolver(formSchema) });
    const { handleSubmit } = methods;

    return (
    <form onSubmit={handleSubmit(onSubmit)}>
    {children}
    <input type="submit" />
    </form>
    );
    };



    export const HomePage = () => {
    const data = {
    userName: "Shannon",
    age: 40,
    }
    const onSubmit = (data) => {
    console.log(data);
    }

    const formSchema = {
    username: z.string().min(2, {
    message: "Username must be at least 2 characters.",
    }),
    age: z.number().min(18, {
    message: "You must be at least 18 years old.",
    }),
    }
    return (
    <>
    <Form onSubmit={onSubmit} formSchema={formSchema} defaultValues={data}>

    <FormField name="username">
    <FormLabel>User Name</FormLabel>
    <ShortText placeHolder="e.g ShannonSmith42" />
    <FormDescription>Enter the users name</FormDescription>
    <FormMessage/>
    </FormField>

    <FormField name="age">
    <FormLabel>Age</FormLabel>
    <Number placeHolder="eg. 3" />
    <FormDescription>Your age to the nearest year</FormDescription>
    <FormMessage/>
    </FormField>
    </Form>
    </>
    )
    };