form-context-react-zod

React form context with Zod validation helpers

Current version: 1.2.0

Demo

Check out the live demo to see the library in action.

Installation

npm install form-context-react-zod

Features

• Type-safe form handling with Zod schemas
• Nested form support
• Array field management
• Client and server-side validation
• React hooks for form state management

Usage

import { FormProvider, useForm, zodHelpers } from 'form-context-react-zod';

// Basic example
const MyForm = () => {
  const schema = z.object({
    name: z.string().min(2),
    email: z.string().email()
  });

  return (
    <FormProvider schema={schema} onSubmit={values => console.log(values)}>
      <FormField name="name" />
      <FormField name="email" />
      <button type="submit">Submit</button>
    </FormProvider>
  );
};

Debugging

FormState

The FormState component is a developer tool for inspecting the current form state, errors, and touched fields.

Usage:

import { FormState } from 'form-context-react-zod';

<FormState showToggle />

• Use the showToggle prop to allow switching between light and dark mode.
• This component is intended for development and debugging purposes.

Documentation

For detailed documentation, see:

• Form API Documentation
• Zod Helpers Documentation

License

MIT

Disclaimer

This project is not affiliated with, endorsed by, or sponsored by React or Zod. All product names, logos, and brands are property of their respective owners.