https://github.com/konradmi/zod-hook-form

react-hook-form + zod wrapper
https://github.com/konradmi/zod-hook-form

forms react-hook-form typescript validation zod

Last synced: 14 days ago
JSON representation

react-hook-form + zod wrapper

• Host: GitHub
• URL: https://github.com/konradmi/zod-hook-form
• Owner: konradmi
• Created: 2023-06-16T05:59:58.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2023-07-07T06:12:44.000Z (over 1 year ago)
• Last Synced: 2024-04-25T10:20:25.242Z (9 months ago)
• Topics: forms, react-hook-form, typescript, validation, zod
• Language: TypeScript
• Homepage:
• Size: 121 KB
• Stars: 2
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
## zod-hook-form

Thin wrapper over react-hook-form and zod. Types are infered based on the provided zod schema. It also provides helpers for dealing with:

- form inputs

- form arrays

- custom form components

### Examples

- A login form:

```

import * as z from 'zod'

import { ZodForm, ZodFormInput, ZodFormSubmitButton, ZodFormCancelButton, ZodFormSubmitError } from 'zod-hook-form'

import './LoginForm.css'

const schema = z.object({

  username: z.string().min(3, { message: 'Too short'}).max(20, { message: 'Too long'}),

  password: z.string().min(3, { message: 'Too short'}).max(20, { message: 'Too long'}),

})

const initialValues = {

  username: '',

  password: '',

}

const LoginForm = () => {

  const handleSubmit = async (values: z.infer) => {

    console.log('values', values)

  }

  return (

    

      


        Username

        

      

      


        Password

        

      

      

      

    

  )

}

```


- A custom form input:

```

import { ZodFormElement } from 'zod-hook-form'

import type { ComponentProps, ZodFormElementProps } from 'zod-hook-form'

const Input = ({ value, onChange, onBlur, error, ...rest }: ComponentProps) => {

  return (

     onChange(e.target.value)}

      onBlur={onBlur}

      {...rest}

    />

  )

}

```

Somewhere in the form:

```

...

...

```

- Integration with 3rd party libraries:

```

import InputLabel from '@mui/material/InputLabel';

import MenuItem from '@mui/material/MenuItem';

import FormControl from '@mui/material/FormControl';

import Select from '@mui/material/Select';

import { ZodFormElement, ZodForm, ZodFormInput, ZodFormSubmitButton, ZodFormCancelButton } from 'zod-hook-form'

import type { ComponentProps } from 'zod-hook-form'

const MUISelect = ({ value, onChange, onBlur, error, ...rest }: ComponentProps) => {

  return (

    

      Age

       onChange(+e.target.value)}

        {...rest}

      >

        Ten

        Eighteen

        Twenty

        Thirty

      

    

  )

}

```

Somewhere in the form:

```

...

...

```

To run the examples:

```

cd examples

yarn

yarn run dev

```