⬆️ Upgrade and migrate to react-hook-form v7

leodr · Apr 9, 2021 · f402864 · f402864
1 parent 2a70f94
commit f402864
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 15 deletions.
diff --git a/package.json b/package.json
@@ -40,7 +40,7 @@
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-firebase-hooks": "^3.0.3",
-    "react-hook-form": "^6.15.5",
+    "react-hook-form": "^7.0.4",
     "react-linkify": "^1.0.0-alpha",
     "react-syntax-highlighter": "^15.4.3",
     "react-virtuoso": "^1.6.0",

diff --git a/src/pages/[formSlug]/settings.tsx b/src/pages/[formSlug]/settings.tsx
@@ -230,10 +230,9 @@ export default function FormSettingsPage() {
                         <div className="max-w-lg flex flex-col rounded-md shadow-sm">
                           <input
                             type="text"
-                            name="name"
                             id="name"
                             className="relative flex-1 block w-full focus:ring-rose-400 focus:border-rose-400 min-w-0 rounded-none rounded-t-md sm:text-sm border-gray-300"
-                            ref={register({ minLength: 1 })}
+                            {...register("name", { minLength: 1 })}
                           />
                           <span className="inline-flex items-center px-3 py-1 rounded-b-md border border-t-0 border-gray-300 bg-gray-50 text-gray-500 text-sm sm:text-xs">
                             {`${host}/${formSlug}`}
@@ -259,10 +258,9 @@ export default function FormSettingsPage() {
                       <div className="mt-1 sm:mt-0 sm:col-span-2">
                         <textarea
                           id="description"
-                          name="description"
                           rows={3}
                           className="max-w-lg shadow-sm block w-full focus:ring-rose-400 focus:border-rose-400 sm:text-sm border-gray-300 rounded-md"
-                          ref={register}
+                          {...register("description")}
                         />
                         <p className="mt-2 text-sm text-gray-500">
                           It is helpful to state where the form is found.
@@ -274,7 +272,7 @@ export default function FormSettingsPage() {
                         name="color"
                         control={control}
                         defaultValue="green"
-                        render={({ value, onChange }) => (
+                        render={({ field: { onChange, value } }) => (
                           <Listbox value={value} onChange={onChange}>
                             {({ open }) => (
                               <>

diff --git a/src/pages/new-form.tsx b/src/pages/new-form.tsx
@@ -82,10 +82,11 @@ export default function NewFormPage() {
                           <div className="max-w-lg flex flex-col rounded-md shadow-sm">
                             <input
                               type="text"
-                              name="name"
                               id="name"
                               className="relative flex-1 block w-full focus:ring-rose-400 focus:border-rose-400 min-w-0 rounded-none rounded-t-md sm:text-sm border-gray-300"
-                              ref={register({ validate: validateFormName })}
+                              {...register("name", {
+                                validate: validateFormName,
+                              })}
                             />
                             <span className="inline-flex items-center px-3 py-1 rounded-b-md border border-t-0 border-gray-300 bg-gray-50 text-gray-500 text-sm sm:text-xs">
                               {`${host}/${slug}`}
@@ -108,10 +109,9 @@ export default function NewFormPage() {
                         <div className="mt-1 sm:mt-0 sm:col-span-2">
                           <textarea
                             id="description"
-                            name="description"
                             rows={3}
                             className="max-w-lg shadow-sm block w-full focus:ring-rose-400 focus:border-rose-400 sm:text-sm border-gray-300 rounded-md"
-                            ref={register}
+                            {...register("description")}
                           />
                           <p className="mt-2 text-sm text-gray-500">
                             It is helpful to state where the form is found.
@@ -123,7 +123,7 @@ export default function NewFormPage() {
                           name="color"
                           control={control}
                           defaultValue="green"
-                          render={({ value, onChange }) => (
+                          render={({ field: { value, onChange } }) => (
                             <Listbox value={value} onChange={onChange}>
                               {({ open }) => (
                                 <>

diff --git a/yarn.lock b/yarn.lock
@@ -6860,10 +6860,10 @@ react-firebase-hooks@^3.0.3:
   resolved "https://registry.yarnpkg.com/react-firebase-hooks/-/react-firebase-hooks-3.0.3.tgz#61310fce721a23ad6f50cd1159a6ced87088adff"
   integrity sha512-g66N21BTzuYWmQhWiTkBPwkrHcK5wNVpq/xkaAyWWDOl3zo9Yx/Q3nG+yVlj966Xi3E5ABC7a/Efk2LNAzzGPA==
 
-react-hook-form@^6.15.5:
-  version "6.15.5"
-  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.15.5.tgz#c2578f9ce6a6df7b33015587d40cd880dc13e2db"
-  integrity sha512-so2jEPYKdVk1olMo+HQ9D9n1hVzaPPFO4wsjgSeZ964R7q7CHsYRbVF0PGBi83FcycA5482WHflasdwLIUVENg==
+react-hook-form@^7.0.4:
+  version "7.0.4"
+  resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.0.4.tgz#efd800289f3e6aa237fde5121f4ef7ba7653fb3b"
+  integrity sha512-4LN1bagvQPWdn17gXDo917GZLSCNtKR5Wd4D05VMnCdGkJp31mYWN7RlhQUg6tSBbIB8KqPfkmYbxET4SgAkqQ==
 
 [email protected], react-is@^16.8.1:
   version "16.13.1"