jamsrui_rhf_form_with_zod_validation_quickstart.ts

1import React from 'react';
2import { useForm } from 'react-hook-form';
3import { Form, FormField, FormInput, FormButton } from '@jamsrui/rhf';
4import { z } from 'zod';
5import { zodResolver } from '@hookform/resolvers/zod';
6
7const schema = z.object({
8  username: z.string().min(2, "Username must be at least 2 characters"),
9  email: z.string().email("Invalid email address"),
10});
11
12type FormValues = z.infer<typeof schema>;
13
14const QuickStartExample = () => {
15  const form = useForm<FormValues>({
16    resolver: zodResolver(schema),
17    defaultValues: {
18      username: '',
19      email: '',
20    },
21  });
22
23  const onSubmit = (data: FormValues) => {
24    console.log('Form Submitted:', data);
25  };
26
27  return (
28    <Form {...form} onSubmit={form.handleSubmit(onSubmit)}>
29      <FormField
30        name="username"
31        render={({ field }) => (
32          <FormInput 
33            {...field} 
34            label="Username" 
35            placeholder="Enter your username" 
36          />
37        )}
38      />
39      <FormField
40        name="email"
41        render={({ field }) => (
42          <FormInput 
43            {...field} 
44            label="Email" 
45            placeholder="Enter your email" 
46          />
47        )}
48      />
49      <FormButton type="submit">Submit</FormButton>
50    </Form>
51  );
52};
53
54export default QuickStartExample;