zod-prop-types

A utility for transforming Zod schemas into PropTypes for React components, ensuring type safety at runtime in a user-friendly and developer-friendly way.

Installation

npm install zod-prop-types
# or with yarn
yarn add zod-prop-types
# or with pnpm
pnpm add zod-prop-types

Usage

import { zodPropTypes } from "zod-prop-types";
import { z } from "zod";

// Define your Zod schema
const GreetingPropsSchema = z.object({ name: z.string(), age: z.number() });

// Create your component
const Greeting = ({ name, age }: z.infer<typeof GreetingPropsSchema>) => (
  <div>{`Hello, ${name}. You are ${age} years old.`}</div>
);

// Assign transformed Zod schema as propTypes
Greeting.propTypes = zodPropTypes(GreetingPropsSchema);

export { Greeting };

API Reference

`zodPropTypes(ZodSchema)`

ZodSchema: A Zod schema object.
Returns: An object of PropTypes validators for the given Zod schema.

Contributing

We welcome contributions! Please see CONTRIBUTING.md for details on how to contribute.