UseFormikDemo

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 { useFormikHook } from '@/hooks/guarahooks/use-formik';
20 
21interface FormValues {
22  firstName: string;
23  lastName: string;
24}
25 
26export default function UseFormikDemo() {
27  const { values, errors, touched, handleChange, handleBlur, onSubmit } =
28    useFormikHook<FormValues>({
29      initialValues: { firstName: '', lastName: '' },
30      validate: (values) => {
31        const errors: Partial<FormValues> = {};
32 
33        if (!values.firstName) {
34          errors.firstName = 'First name is required';
35        }
36 
37        if (!values.lastName) {
38          errors.lastName = 'Last name is required';
39        }
40 
41        return errors;
42      },
43      onSubmit: () => {}, // This will be overridden by our onSubmit handler
44    });
45 
46  const handleFormSubmit = (data: FormValues) => {
47    console.log('Form Data:', data);
48    toast.success(`Hello, ${data.firstName} ${data.lastName}!`);
49  };
50 
51  return (
52    <form onSubmit={onSubmit(handleFormSubmit)} className="max-w-md w-full">
53      <Card className="w-full">
54        <CardHeader>
55          <CardTitle>useFormik</CardTitle>
56          <CardDescription>
57            Simplified Formik usage with validation
58          </CardDescription>
59        </CardHeader>
60        <CardContent className="space-y-4">
61          <div className="grid gap-2">
62            <Label htmlFor="firstName">First Name</Label>
63            <Input
64              id="firstName"
65              name="firstName"
66              value={values.firstName}
67              onChange={handleChange}
68              onBlur={handleBlur}
69            />
70            {touched.firstName && errors.firstName && (
71              <p className="text-destructive">{errors.firstName}</p>
72            )}
73          </div>
74          <div className="grid gap-2">
75            <Label htmlFor="lastName">Last Name</Label>
76            <Input
77              id="lastName"
78              name="lastName"
79              value={values.lastName}
80              onChange={handleChange}
81              onBlur={handleBlur}
82            />
83            {touched.lastName && errors.lastName && (
84              <p className="text-destructive">{errors.lastName}</p>
85            )}
86          </div>
87// … truncated