UseReactHookFormDemo

1'use client';
2 
3import React from 'react';
4 
5import { toast } from 'sonner';
6 
7import { Button } from '@/components/ui/button';
8import {
9  Card,
10  CardContent,
11  CardDescription,
12  CardFooter,
13  CardHeader,
14  CardTitle,
15} from '@/components/ui/card';
16import { Input } from '@/components/ui/input';
17import { Label } from '@/components/ui/label';
18 
19import { useReactHookForm } from '@/hooks/guarahooks/use-react-hook-form';
20 
21export default function UseReactHookFormDemo() {
22  const {
23    register,
24    onSubmit,
25    formState: { errors },
26  } = useReactHookForm<{ firstName: string; lastName: string }>({
27    defaultValues: { firstName: '', lastName: '' },
28  });
29 
30  const handleFormSubmit = (data: { firstName: string; lastName: string }) => {
31    console.log('Form Data:', data);
32    toast.success(`Hello, ${data.firstName} ${data.lastName}!`);
33  };
34 
35  return (
36    <Card className="max-w-md w-full">
37      <CardHeader>
38        <CardTitle>useReactHookForm</CardTitle>
39        <CardDescription>Simplified React Hook Form usage</CardDescription>
40      </CardHeader>
41      <CardContent className="space-y-4">
42        <div className="grid gap-2">
43          <Label htmlFor="firstName">First Name</Label>
44          <Input
45            id="firstName"
46            {...register('firstName', { required: 'First name is required' })}
47          />
48          {errors.firstName && (
49            <p className="text-destructive">{errors.firstName.message}</p>
50          )}
51        </div>
52        <div className="grid gap-2">
53          <Label htmlFor="lastName">Last Name</Label>
54          <Input
55            id="lastName"
56            {...register('lastName', { required: 'Last name is required' })}
57          />
58          {errors.lastName && (
59            <p className="text-destructive">{errors.lastName.message}</p>
60          )}
61        </div>
62      </CardContent>
63      <CardFooter>
64        <Button onClick={onSubmit(handleFormSubmit)} className="w-full">
65          Submit
66        </Button>
67      </CardFooter>
68    </Card>
69  );
70}