Merge branch 'master' into fix/copy-button-responsive

Author: bluebill1049

src/components/ApiGallery.tsx

@@ -18,7 +18,7 @@ export default function ApiGallery() {
 
     if (version !== 7) {
       router.push(
-        `https://react-hook-form-website-git-leagcy-hook-form.vercel.app/${version}/api`
+        `https://react-hook-form-website-git-leagcy-hook-form.vercel.app/v${version}/api`
       )
     } else {
       router.push(`/v${version}/docs/`)

src/content/advanced-usage.mdx

@@ -381,7 +381,7 @@ function App() {
 
       <Input {...register("input")} />
 
-      <button type="button" onClick={() => reset({ defaultValues })}>
+      <button type="button" onClick={() => reset({ ...defaultValues })}>
         Reset
       </button>
       <input type="submit" />
@@ -408,7 +408,7 @@ function App() {
   const onSubmit = (data) => console.log(data)
 
   useEffect(() => {
-    register({ name: "select" })
+    register("select")
   }, [register])
 
   const handleChange = (e) => setValue("select", e.target.value)
@@ -521,7 +521,12 @@ const items = Array.from(Array(1000).keys()).map((i) => ({
 const WindowedRow = memo(({ index, style, data }) => {
   const { register } = useFormContext()
 
-  return <input {...register(`${index}.quantity`)} />
+  return (
+    <div style={style}>
+      <label>{data[index].title}</label>
+      <input {...register(`${index}.quantity`)} />
+    </div>
+  )
 })
 
 export const App = () => {

src/content/faqs.mdx

@@ -168,12 +168,11 @@ export default function App() {
   const onSubmit = (data) => console.log(data)
   const { ref, ...rest } = register("firstName")
   const onClick = () => {
-    firstNameRef.current!.value = ""
+    firstNameRef.current.value = ""
   }
 
   useImperativeHandle(ref, () => firstNameRef.current)
 
-
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <input {...rest} ref={firstNameRef} />
@@ -207,7 +206,7 @@ export default function App() {
   useEffect(() => {
     register("firstName", { required: true })
     register("lastName")
-  }, [])
+  }, [register])
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
@@ -240,18 +239,11 @@ Make sure you are not using `value`. The correct property is `defaultValue`.
 
 React Hook Form is focusing on uncontrolled inputs, which means you don't need to change the input `value` via `state` via `onChange`. In fact, you don't need `value` at all. You only need to set `defaultValue` for the initial input value.
 
-```javascript
-import { useForm } from "react-hook-form/dist/index.ie11" // V6
-import { useForm } from "react-hook-form/dist/react-hook-form.ie11" // V5'
-// Resolvers
-import { yupResolver } from "@hookform/resolvers/dist/ie11/yup"
-```
-
 ---
 
 ## React Hook Form, Formik or Redux Form? {#ReactHookFormFormikorReduxForm}
 
-First of all, all libs try to solve the same problem: make the form building experience as easy as possible. However, there are some fundamental differences between these three. `react-hook-form` is built with uncontrolled inputs in mind and tries to provide your form with the best performance and least amount of re-renders possible. Additionallly, `react-hook-form` is built with React Hooks and used as a hook, which means there is no Component for you to import. Here are some of the detailed differences:
+First of all, all libs try to solve the same problem: make the form building experience as easy as possible. However, there are some fundamental differences between these three. `react-hook-form` is built with uncontrolled inputs in mind and tries to provide your form with the best performance and least amount of re-renders possible. Additionally, `react-hook-form` is built with React Hooks and used as a hook, which means there is no Component for you to import. Here are some of the detailed differences:
 
 |                    | React Hook Form                                                                                                                                                                                              | Formik                                                                 | Redux Form                                                                              |
 | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------- |
@@ -303,7 +295,7 @@ It's important to understand that React Hook Form embraces native form behavior
 - [Modal form and toggle inputs example](https://codesandbox.io/s/react-hook-form-modal-form-conditional-inputs-c7n0r)
 - [Tab form example](https://codesandbox.io/s/tabs-760h9)
 
-Alternatively you can use the deprecated option `shouldUnregister: false` when calling \`useForm\`.
+Alternatively you can use the deprecated option `shouldUnregister: false` when calling `useForm`.
 
 <TabGroup buttonLabels={["Controller", "Custom Register"]}>
 

src/content/ts.mdx

@@ -101,8 +101,8 @@ export default function App() {
 
   return (
     <form onSubmit={handleSubmit(onSubmit, onError)}>
-      <input {...(register("firstName"), { required: true })} />
-      <input {...(register("lastName"), { minLength: 2 })} />
+      <input {...register("firstName", { required: true })} />
+      <input {...register("lastName", { minLength: 2 })} />
       <input type="email" {...register("email")} />
 
       <input type="submit" />
@@ -547,7 +547,7 @@ export type FormStateProxy<TFieldValues extends FieldValues = FieldValues> = {
 
 ```tsx copy sandbox="https://codesandbox.io/s/react-hook-form-nestedvalue-lskdv"
 import { useForm, NestedValue } from "react-hook-form"
-import { Autocomplete, TextField, Select } from "@material-ui/core"
+import { TextField, Select } from "@material-ui/core"
 import { Autocomplete } from "@material-ui/lab"
 
 type Option = {
@@ -602,7 +602,7 @@ export default function App() {
 
       <Select
         value=""
-        onChange={(e) => setValue("muiSelect", e.target.value as number[])}
+        onChange={(e) => setValue("select", e.target.value as number[])}
       >
         <MenuItem value={10}>Ten</MenuItem>
         <MenuItem value={20}>Twenty</MenuItem>