How to use Zod in React?

Zod is a TypeScript-first schema declaration and validation library. It's designed to work seamlessly with TypeScript and offers a concise way to define and validate data structures. To use Zod in a React application, you can follow these steps:

1. Install Zod: Install Zod as a dependency in your React project.

   npm install zod

1. Define a Zod Schema: Create a Zod schema to define the shape and validation rules for your form data. For example, create a file named schemas.js:

   // schemas.js
   import { z } from 'zod';

   export const loginSchema = z.object({
     email: z.string().email('Invalid email address'),
     password: z.string().min(6, 'Password must be at least 6 characters'),
   });

1. Create a Form Component: Create a React component for your form, and use the Zod schema for validation. Here's an example:

   // LoginForm.js
   import React from 'react';
   import { useForm } from 'react-hook-form';
   import { loginSchema } from './schemas';

   const LoginForm = () => {
     const { register, handleSubmit, errors } = useForm({
       resolver: async (data) => {
         try {
           // Validate using Zod schema
           await loginSchema.validate(data);
           return {
             values: data,
             errors: {},
           };
         } catch (error) {
           return {
             values: {},
             errors: error.errors.reduce((acc, curr) => {
               acc[curr.path[0]] = curr.message;
               return acc;
             }, {}),
           };
         }
       },
     });

     const onSubmit = (data) => {
       // Handle form submission logic here
       console.log(data);
     };

     return (
       <form onSubmit={handleSubmit(onSubmit)}>
         <label>Email</label>
         <input type="text" name="email" ref={register} />
         {errors.email && <p>{errors.email}</p>}

         <label>Password</label>
         <input type="password" name="password" ref={register} />
         {errors.password && <p>{errors.password}</p>}

         <button type="submit">Submit</button>
       </form>
     );
   };

   export default LoginForm;

1. Explanation:

   • We use the useForm hook from react-hook-form to manage form state and validation.
   • The resolver function is used to integrate Zod with react-hook-form. It asynchronously validates the form data using the Zod schema.
   • Errors from Zod validation are displayed next to the corresponding input fields.

2. Usage:
   Import and use the LoginForm component in your main application file (e.g., App.js).
   

   // App.js
   import React from 'react';
   import LoginForm from './LoginForm';

   const App = () => {
     return (
       <div>
         <h1>Login Form</h1>
         <LoginForm />
       </div>
     );
   };

   export default App;

Now you have a React form using react-hook-form for state management and Zod for validation. Customize the form and validation rules according to your specific requirements.

If you enjoy my content and would like to support my work, you can buy me a coffee. Your support is greatly appreciated!

Disclaimer: This content has been generated by AI.