Update Important Code Sandbox + Add TS examples

src/components/ApiPage.tsx

@@ -33,6 +33,7 @@ import setMultipleErrors from "./codeExamples/setMultipleErrors"
 import setAllErrors from "./codeExamples/setAllErrors"
 import resetCodeControlled from "./codeExamples/resetCodeControlled"
 import resetController from "./codeExamples/resetController"
+import resetControllerTs from "./codeExamples/resetControllerTs"
 import control from "./codeExamples/control"
 import UseFieldArray from "./UseFieldArray"
 import ValidationResolver from "./ValidationResolver"
@@ -699,6 +700,8 @@ function ApiPage({ formData, defaultLang, api }: Props) {
               <CodeArea
                 rawData={resetController}
                 url="https://codesandbox.io/s/react-hook-form-controller-079xx"
+                tsRawData={resetControllerTs}
+                tsUrl="https://codesandbox.io/s/react-hook-form-controller-ts-wr80q"
               />
             </TabGroup>
           </section>

src/components/GetStartedPage.tsx

@@ -14,6 +14,7 @@ import {
   applyValidation,
   applyValidationTs,
   controlledComponent,
+  controlledComponentTs,
 } from "./codeExamples/getStarted"
 import LearnMore from "../components/learnMore"
 import Footer from "../components/Footer"
@@ -269,6 +270,8 @@ const Faq = ({ location, defaultLang, getStarted }: Props) => {
           <CodeArea
             rawData={controlledComponent}
             url="https://codesandbox.io/s/react-hook-form-controller-079xx"
+            tsRawData={controlledComponentTs}
+            tsUrl="https://codesandbox.io/s/react-hook-form-controller-ts-wr80q"
           />
 
           <h2

src/components/V5/ApiPageV5.tsx

@@ -36,6 +36,7 @@ import setMultipleErrors from "../V5/codeExamples/setMultipleErrors"
 import setAllErrors from "../V5/codeExamples/setAllErrors"
 import resetCodeControlled from "../V5/codeExamples/resetCodeControlled"
 import resetController from "../V5/codeExamples/resetController"
+import resetControllerTs from "../V5/codeExamples/resetControllerTs"
 import control from "../V5/codeExamples/control"
 import nativeValidation from "../V5/codeExamples/nativeValidation"
 import UseFieldArray from "../UseFieldArray"
@@ -775,6 +776,8 @@ function ApiPage({ formData, defaultLang, api }: Props) {
               <CodeArea
                 rawData={resetController}
                 url="https://codesandbox.io/s/react-hook-form-controller-079xx"
+                tsRawData={resetControllerTs}
+                tsUrl="https://codesandbox.io/s/react-hook-form-controller-ts-v5-g2gmc"
               />
               <CodeArea
                 rawData={resetCodeControlled}

src/components/V5/codeExamples/resetControllerTs.ts

@@ -0,0 +1,44 @@
+export default `import React from "react";
+import { useForm, Controller } from "react-hook-form";
+import { TextField } from "@material-ui/core";
+
+interface IFormInputs {
+  firstName: string
+  lastName: string
+}
+
+export default function App() {
+  const { register, handleSubmit, reset, setValue, control } = useForm<IFormInputs>();
+  const onSubmit = (data: IFormInputs) => console.log(data);
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Controller 
+        as={TextField} 
+        name="firstName"
+        control={control} 
+        rules={ required: true } 
+        defaultValue=""
+      />
+      <Controller 
+        as={TextField} 
+        name="lastName"
+        control={control}
+        defaultValue="" 
+      />
+
+      <input type="submit" />
+      <input type="button" onClick={reset} />
+      <input
+        type="button"
+        onClick={() => {
+          reset({
+            firstName: "bill",
+            lastName: "luo"
+          });
+        }}
+      />
+    </form>
+  );
+}
+`

src/components/codeExamples/getStarted.ts

@@ -347,6 +347,39 @@ function App() {
 }
 `
 
+export const controlledComponentTs = `import React from "react";
+import { useForm, Controller } from "react-hook-form";
+import ReactSelect from "react-select";
+import { TextField, Checkbox } from "@material-ui/core";
+
+interface IFormInputs {
+  TextField: string
+  MyCheckbox: boolean
+}
+
+function App() {
+  const methods = useForm<IFormInputs>();
+  const { handleSubmit, control, reset } = methods;
+  const onSubmit = (data: IFormInputs) => console.log(data);
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      {/* Option 1: pass a component to the Controller. */}
+      <Controller as={TextField} name="TextField" control={control} defaultValue="" />
+
+      {/* Option 2: use render props to assign events and value */}
+      <Controller
+        name="MyCheckbox"
+        control={control}
+        defaultValue={false}
+        rules={{ required: true }}
+        render=(props => <Checkbox {...props} />) // props contains: onChange, onBlur and value
+      />
+    </form>
+  );
+}
+`
+
 export const globalState = `import React from "react";
 import { useForm } from "react-hook-form";
 import { connect } from "react-redux";

src/components/codeExamples/resetControllerTs.ts

@@ -0,0 +1,44 @@
+export default `import React from "react";
+import { useForm, Controller } from "react-hook-form";
+import { TextField } from "@material-ui/core";
+
+interface IFormInputs {
+  firstName: string
+  lastName: string
+}
+
+export default function App() {
+  const { register, handleSubmit, reset, setValue, control } = useForm<IFormInputs>();
+  const onSubmit = (data: IFormInputs) => console.log(data);
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <Controller 
+        as={TextField} 
+        name="firstName"
+        control={control} 
+        rules={ required: true } 
+        defaultValue=""
+      />
+      <Controller 
+        as={TextField} 
+        name="lastName"
+        control={control}
+        defaultValue="" 
+      />
+
+      <input type="submit" />
+      <input type="button" onClick={reset} />
+      <input
+        type="button"
+        onClick={() => {
+          reset({
+            firstName: "bill",
+            lastName: "luo"
+          });
+        }}
+      />
+    </form>
+  );
+}
+`