☔️ feat: support defaultValues with query string

app/src/app.tsx

@@ -40,12 +40,14 @@ import SetValueAsyncStrictMode from './setValueStrictMode';
 import { DelayError } from './delayError';
 import './style.css';
 import FormComponent from './form';
+import { QueryString } from './queryString';
 
 const App: React.FC = () => {
   return (
     <BrowserRouter>
       <Routes>
         <Route path="/basic/:mode" element={<Basic />} />
+        <Route path="/basic/queryString" element={<QueryString />} />
         <Route
           path="/validate-field-criteria"
           element={<ValidateFieldCriteria />}

app/src/queryString.tsx

@@ -0,0 +1,167 @@
+import React, { useState } from 'react';
+import { useForm, NestedValue, ValidationMode } from 'react-hook-form';
+import { useParams } from 'react-router-dom';
+
+let renderCounter = 0;
+
+export const QueryString: React.FC = () => {
+  const { mode } = useParams();
+  const [data, setData] = React.useState({});
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+    reset,
+  } = useForm<{
+    firstName: string;
+    lastName: string;
+    min: string;
+    max: string;
+    minDate: string;
+    maxDate: string;
+    minLength: string;
+    minRequiredLength: string;
+    selectNumber: string;
+    pattern: string;
+    radio: string;
+    checkbox: string;
+    checkboxArray: NestedValue<string[]>;
+    multiple: string;
+    validate: string;
+    nestItem: {
+      nest1: string;
+    };
+    arrayItem: { test1: string; test2: string }[];
+  }>({
+    mode: mode as keyof ValidationMode,
+  });
+  const [onInvalidCalledTimes, setOnInvalidCalledTimes] = useState(0);
+  const onInvalid = () => setOnInvalidCalledTimes((prevCount) => prevCount + 1);
+
+  renderCounter++;
+
+  return (
+    <form
+      onSubmit={handleSubmit((data) => {
+        setData(data);
+      }, onInvalid)}
+    >
+      <input
+        placeholder="nest.nest1"
+        {...register('nestItem.nest1', { required: true })}
+      />
+      {errors.nestItem?.nest1 && <p>nest 1 error</p>}
+      <input
+        placeholder="arrayItem[0].test1"
+        {...register('arrayItem.0.test1', { required: true })}
+      />
+      {errors.arrayItem?.[0]?.test1 && <p>array item 1 error</p>}
+      <input
+        {...register('firstName', { required: true })}
+        placeholder="firstName"
+      />
+      {errors.firstName && <p>firstName error</p>}
+      <input
+        {...register('lastName', { required: true, maxLength: 5 })}
+        placeholder="lastName"
+      />
+      {errors.lastName && <p>lastName error</p>}
+      <input
+        type="number"
+        {...register('min', { min: 10 })}
+        placeholder="min"
+      />
+      {errors.min && <p>min error</p>}
+      <input
+        type="number"
+        {...register('max', { max: 20 })}
+        placeholder="max"
+      />
+      {errors.max && <p>max error</p>}
+      <input
+        type="date"
+        {...register('minDate', { min: '2019-08-01' })}
+        placeholder="minDate"
+      />
+      {errors.minDate && <p>minDate error</p>}
+      <input
+        type="date"
+        {...register('maxDate', { max: '2019-08-01' })}
+        placeholder="maxDate"
+      />
+      {errors.maxDate && <p>maxDate error</p>}
+      <input
+        {...register('minLength', { minLength: 2 })}
+        placeholder="minLength"
+      />
+      {errors.minLength && <p>minLength error</p>}
+      <input
+        {...register('minRequiredLength', { minLength: 2, required: true })}
+        placeholder="minRequiredLength"
+      />
+      {errors.minRequiredLength && <p>minRequiredLength error</p>}
+      <select {...register('selectNumber', { required: true })}>
+        <option value="">Select</option>
+        <option value={'1'}>1</option>
+        <option value={'2'}>2</option>
+      </select>
+      {errors.selectNumber && <p>selectNumber error</p>}
+      <input
+        {...register('pattern', { pattern: /\d+/ })}
+        placeholder="pattern"
+      />
+      {errors.pattern && <p>pattern error</p>}
+      Radio1
+      <input type="radio" {...register('radio')} value="1" />
+      Radio2
+      <input type="radio" value="2" {...register('radio')} />
+      Radio3
+      <input
+        type="radio"
+        value="3"
+        {...register('radio', { required: true })}
+      />
+      {errors.radio && <p>radio error</p>}
+      <input type="checkbox" {...register('checkbox', { required: true })} />
+      {errors.checkbox && <p>checkbox error</p>}
+      <input
+        type="checkbox"
+        value="1"
+        {...register('checkboxArray', { required: true })}
+      />
+      <input
+        type="checkbox"
+        value="2"
+        {...register('checkboxArray', { required: true })}
+      />
+      <input
+        type="checkbox"
+        value="3"
+        {...register('checkboxArray', { required: true })}
+      />
+      {errors.checkboxArray && <p>checkboxArray error</p>}
+      <select multiple {...register('multiple', { required: true })}>
+        <option value="optionA">optionA</option>
+        <option value="optionB">optionB</option>
+      </select>
+      {errors.multiple && <p>multiple error</p>}
+      <input
+        type="validate"
+        placeholder="validate"
+        {...register('validate', {
+          validate: (value) => value === 'test',
+        })}
+      />
+      {errors.validate && <p>validate error</p>}
+      <button id="submit">Submit</button>
+      <button type="button" id="resetForm" onClick={() => reset()}>
+        Reset
+      </button>
+      <div id="renderCount">{renderCounter}</div>
+      <div id="on-invalid-called-times">
+        onInvalid callback called {onInvalidCalledTimes} times
+      </div>
+      <pre>{JSON.stringify(data)}</pre>
+    </form>
+  );
+};

app/src/welcome/index.tsx

@@ -17,7 +17,26 @@ const items: Item[] = [
   {
     title: 'Basic',
     description: 'Should validate the form in different modes',
-    slugs: ['/basic/onSubmit', '/basic/onBlur', '/basic/onChange'],
+    slugs: [
+      '/basic/onSubmit',
+      '/basic/onBlur',
+      '/basic/onChange',
+      `/basic/queryString?default-values=${encodeURIComponent(
+        JSON.stringify({
+          firstName: 'bill',
+          lastName: 'luo',
+          nestItem: {
+            nest1: 'ntest1',
+          },
+          arrayItem: [{ test1: 'test1' }],
+          radio: '1',
+          multiple: 'optionA',
+          checkboxArray: ['1', '2', '3'],
+          selectNumber: '1',
+          minDate: '2023-10-23',
+        }),
+      )}`,
+    ],
   },
   {
     title: 'BasicSchemaValidation',

app/src/welcome/styles.ts

@@ -52,4 +52,7 @@ export const slug: object = {
   display: 'block',
   marginBottom: '.25rem',
   textDecoration: 'none',
+  maxWidth: 400,
+  overflow: 'hidden',
+  textOverflow: 'ellipsis',
 };

cypress/e2e/queryString.cy.ts

@@ -0,0 +1,29 @@
+describe('basic form validation', () => {
+  it('should validate the form and reset the form', () => {
+    cy.visit(
+      `http://localhost:3000/basic/queryString?default-values=${encodeURIComponent(
+        JSON.stringify({
+          firstName: 'bill',
+          lastName: 'luo',
+          nestItem: {
+            nest1: 'nest1',
+          },
+          arrayItem: [{ test1: 'test1' }],
+          radio: '1',
+          multiple: 'optionA',
+          checkboxArray: ['1', '2', '3'],
+          selectNumber: '1',
+          minDate: '2023-10-23',
+        }),
+      )}`,
+    );
+    cy.get('input[name="firstName"]').should('have.value', 'bill');
+    cy.get('input[name="lastName"]').should('have.value', 'luo');
+    cy.get('input[name="nestItem.nest1"]').should('have.value', 'nest1');
+    cy.get('input[name="arrayItem.0.test1"]').should('have.value', 'test1');
+    cy.get('input[name="radio"]').should('have.value', '1');
+    cy.get('input[name="checkboxArray"]').should('be.checked');
+    cy.get('select[name="selectNumber"]').should('have.value', '1');
+    cy.get('input[name="minDate"]').should('have.value', '2023-10-23');
+  });
+});

package.json

@@ -116,7 +116,7 @@
     "files": [
       {
         "path": "./dist/index.cjs.js",
-        "maxSize": "9.8 kB"
+        "maxSize": "9.9 kB"
       }
     ]
   },