Update components and typings according to react-hook-form update

README.md

@@ -24,15 +24,15 @@ yarn add mui-rhf
 ## Usage
 
 ```
-import * as React from 'react';
+import React from 'react';
 
 import { useForm } from "react-hook-form";
 import { MuiRhfForm } from "mui-rhf";
 import { Button } from "@material-ui/core";
 
 const Form = ({ onSubmit }) => {
   // Initialize form
-  const { control, errors, handleSubmit } = useForm();
+  const { control, handleSubmit } = useForm();
 
   const onSubmit = (data) => {
     // Play with retrieved data
@@ -42,7 +42,6 @@ const Form = ({ onSubmit }) => {
     <form onSubmit={handleSubmit(onSubmit)} noValidate>
       <MuiRhfForm
         control={control}
-        errors={errors}
         fields={[
           [{ name: "firstName" }, { name: "lastName" }],
           [{ name: "email" }],
@@ -104,10 +103,6 @@ Provided by [React Hook Form](https://react-hook-form.com/api#watch)
 
 Provided by [React Hook Form](https://react-hook-form.com/api#control)
 
-#### errors: FieldErrors;
-
-Provided by [React Hook Form](https://react-hook-form.com/api#errors)
-
 ## Contributors ✨
 
 This project follows the

src/components/MuiRhfAutocomplete.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 import { Controller } from "react-hook-form";
 
@@ -9,7 +9,6 @@ import { MuiRhfAutocompleteProps } from "~/models/fields";
 
 const MuiRhfAutocomplete: React.FC<MuiRhfAutocompleteProps> = ({
   control,
-  errors,
   name,
   defaultValue,
   textFieldProps,
@@ -19,15 +18,15 @@ const MuiRhfAutocomplete: React.FC<MuiRhfAutocompleteProps> = ({
     name={name}
     control={control}
     defaultValue={defaultValue}
-    render={({ field }) => (
+    render={({ field, fieldState: { error } }) => (
       <Autocomplete
         fullWidth
         {...field}
         {...autocompleteProps}
         renderInput={(params) => (
           <TextField
-            error={!!errors?.[name]}
-            helperText={errors?.[name]}
+            error={!!error}
+            helperText={error?.message}
             {...params}
             {...textFieldProps}
           />

src/components/MuiRhfAutocompleteMultiple.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 import { MuiRhfAutocompleteProps } from "~/models/fields";
 

src/components/MuiRhfAutocompleteSingle.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 import { MuiRhfAutocompleteProps } from "~/models/fields";
 

src/components/MuiRhfCheckbox.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 import { Controller } from "react-hook-form";
 
@@ -13,7 +13,6 @@ import { MuiRhfCheckboxProps } from "~/models/fields";
 
 const MuiRhfCheckbox: React.FC<MuiRhfCheckboxProps> = ({
   control,
-  errors,
   name,
   defaultValue = false,
   label,
@@ -25,10 +24,9 @@ const MuiRhfCheckbox: React.FC<MuiRhfCheckboxProps> = ({
     name={name}
     defaultValue={defaultValue}
     control={control}
-    render={({ field: { onChange, /*onBlur, */ value, ref } }) => {
-      const error = !!errors?.[name];
+    render={({ field: { onChange, value, ref }, fieldState: { error } }) => {
       return (
-        <FormControl required={required} disabled={disabled} error={error}>
+        <FormControl required={required} disabled={disabled} error={!!error}>
           <FormControlLabel
             inputRef={ref}
             checked={value}
@@ -38,7 +36,7 @@ const MuiRhfCheckbox: React.FC<MuiRhfCheckboxProps> = ({
             control={<Checkbox {...rest} />}
             label={label}
           />
-          {error && <FormHelperText>{error}</FormHelperText>}
+          {error && <FormHelperText>{error.message}</FormHelperText>}
         </FormControl>
       );
     }}

src/components/MuiRhfForm.tsx

@@ -12,7 +12,6 @@ const MuiRhfForm: React.FC<MuiRhfFormProps> = ({
   headers,
   watch,
   control,
-  errors,
   spacing,
 }) => {
   return (
@@ -115,8 +114,9 @@ const MuiRhfForm: React.FC<MuiRhfFormProps> = ({
 
                       // Check hideConditions
                       conditionalKeys.forEach((conditionalKey) => {
-                        const [path, customCondition] =
-                          conditionalProps[conditionalKey];
+                        const [path, customCondition] = conditionalProps[
+                          conditionalKey
+                        ];
 
                         _set(
                           extra,
@@ -142,7 +142,6 @@ const MuiRhfForm: React.FC<MuiRhfFormProps> = ({
                         label={label}
                         name={name}
                         control={control}
-                        errors={errors}
                       />
                     </Grid>
                   );

src/components/MuiRhfSelect.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 import { Controller } from "react-hook-form";
 
@@ -14,7 +14,6 @@ import { MuiRhfSelectProps } from "~/models/fields";
 
 const MuiRhfSelect: React.FC<MuiRhfSelectProps> = ({
   control,
-  errors,
   name,
   label,
   defaultValue = "",
@@ -25,10 +24,9 @@ const MuiRhfSelect: React.FC<MuiRhfSelectProps> = ({
     name={name}
     defaultValue={defaultValue}
     control={control}
-    render={({ field }) => {
-      const error = errors?.[name];
+    render={({ field, fieldState: { error } }) => {
       return (
-        <FormControl error={error}>
+        <FormControl error={!!error}>
           <InputLabel id={name}>{label}</InputLabel>
           <Select
             labelId={name}
@@ -43,7 +41,7 @@ const MuiRhfSelect: React.FC<MuiRhfSelectProps> = ({
               ))
             )}
           </Select>
-          {error && <FormHelperText>{error}</FormHelperText>}
+          {error && <FormHelperText>{error.message}</FormHelperText>}
         </FormControl>
       );
     }}

src/components/MuiRhfTextField.tsx

@@ -1,4 +1,4 @@
-import * as React from "react";
+import React from "react";
 
 import { Controller } from "react-hook-form";
 
@@ -8,7 +8,6 @@ import { MuiRhfTextFieldProps } from "~/models/fields";
 
 const MuiRhfTextField: React.FC<MuiRhfTextFieldProps> = ({
   control,
-  errors,
   name,
   defaultValue = "",
   ...rest
@@ -17,11 +16,11 @@ const MuiRhfTextField: React.FC<MuiRhfTextFieldProps> = ({
     name={name}
     defaultValue={defaultValue}
     control={control}
-    render={({ field }) => (
+    render={({ field, fieldState: { error } }) => (
       <TextField
         fullWidth
-        error={!!errors?.[name]}
-        helperText={errors?.[name]}
+        error={!!error}
+        helperText={error?.message}
         {...field}
         {...rest}
       />

src/models/fields/typing.ts

@@ -1,11 +1,9 @@
-import { Control, FieldErrors } from "react-hook-form";
+import { Control } from "react-hook-form";
 import { TextFieldProps, SelectProps, CheckboxProps } from "@material-ui/core";
-import { AutocompleteProps } from "@material-ui/lab";
 
 /** Common fields props */
 export type MuiRhfFieldProps = {
   control: Control;
-  errors: FieldErrors;
   name: string;
   label?: string;
 };

src/models/form/typing.ts

@@ -1,4 +1,4 @@
-import { Control, FieldErrors } from "react-hook-form";
+import { Control } from "react-hook-form";
 import { GridSpacing, GridProps } from "@material-ui/core";
 import {
   MuiRhfTextFieldProps,
@@ -27,7 +27,7 @@ type MuiRhfFormFieldConditionalProps = {
   [key: string]: [string, (value: unknown) => unknown];
 };
 
-type MuiRhfFormField = {
+export type MuiRhfFormField = {
   name: string;
   label?: string;
   props?: any;
@@ -38,7 +38,7 @@ type MuiRhfFormField = {
   conditionalProps?: MuiRhfFormFieldConditionalProps; // Props applied when hideCondition is satisfied
 };
 
-type MuiRhfFormHeader = {
+export type MuiRhfFormHeader = {
   title?: string;
 };
 
@@ -48,5 +48,4 @@ export type MuiRhfFormProps = {
   spacing?: GridSpacing;
   watch?: RhfWatch;
   control: Control;
-  errors: FieldErrors;
 };