https://github.com/lukahartwig/react-hook-form-zod

Typesafe forms with react-hook-form and zod.
https://github.com/lukahartwig/react-hook-form-zod

react react-hook-form reactjs typesafety typescript zod

Last synced: 15 days ago
JSON representation

Typesafe forms with react-hook-form and zod.

• Host: GitHub
• URL: https://github.com/lukahartwig/react-hook-form-zod
• Owner: lukahartwig
• License: mit
• Created: 2023-06-29T19:00:43.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-09-27T04:36:11.000Z (3 months ago)
• Last Synced: 2024-10-25T16:38:26.968Z (2 months ago)
• Topics: react, react-hook-form, reactjs, typesafety, typescript, zod
• Language: TypeScript
• Homepage: https://www.npmjs.com/package/react-hook-form-zod
• Size: 282 KB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-hook-form-zod

[![npm version](https://img.shields.io/npm/v/react-hook-form-zod.svg?style=flat)](https://www.npmjs.com/package/react-hook-form-zod)

react-hook-form-zod is a library that combines [react-hook-form](https://react-hook-form.com/)

and [zod](https://zod.dev/) to create forms with validation.

Its primary purpose is to reduce the boilerplate required to use zod with react-hook-form.

## Install

```bash

npm install react-hook-form-zod zod

```

```bash

yarn add react-hook-form-zod zod

```

```bash

pnpm add react-hook-form-zod zod

```

## Usage

```tsx

import { useForm } from "react-hook-form-zod";

import { z } from "zod";

const schema = z.object({

  name: z.string().min(3).max(10),

  age: z.number().min(18),

});

function Form() {

  const form = useForm({

    schema,

  });

  // ...

}

```

## API Reference

The API is identical to react-hook-form with the exception of the `useForm` hook.

`useForm` takes three additional options which correspond to the arguments of the `zodResolver` factory function:

- `schema`: a zod schema (required)

- `schemaOptions`: options for the zod schema

- `factoryOptions`: options for the hookform resolver factory