Learn More about React Hook Form

Study topics

• Form state
• Form submission
• Form validation
• Default values
• Nested objects
• Arrays
• Dynamic fields
• Numeric and date values
• Watch field values
• Get field values
• Set field values
• Touched and dirty states
• Disabling Fields
• Handle submission error
• Disable form submission
• Form submission state
  • isSubmitting
  • isSubmitted
  • isSubmitSuccessful
  • submitCount
• Reset form
• Async validation
• Validation modes
  • onSumbit
  • onBlur
  • onTouched
  • onChange
  • all
• Manually trigger validations
• Yup integration
• Zod integration
• Material UI integration

Libraries and installations this project

Tailwindcss

yarn add -D tailwindcss postcss autoprefixer

Create Tailwind Config

npx tailwindcss init -p

See more about tailwind config

React Hook Form

yarn add react-hook-form

Hook Form Devtools

yarn add -D @hookform/devtools

Yup

yarn add yup @hookform/resolvers

Zod

yarn add zod

Material UI

yarn add @mui/material @emotion/react @emotion/styled

Documentation

• React Hook Form
• Yup
• Zod
• Material UI
• Tailwindcss
• Typescript
• Vite

Reference

React Hook Form Tutorials - Codevolution Youtube Channel