Add DevTool to examples 1-6

src/examples/01.js

@@ -1,23 +1,28 @@
 import { useForm } from 'react-hook-form'
-
+import { DevTool } from '@hookform/devtools'
 import { instance } from 'api'
 
 export const Example01 = () => {
-  const { register, handleSubmit, errors } = useForm()
+  const { register, handleSubmit, errors, control } = useForm()
 
   const onSubmit = async () => await instance.post('/created')
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
       <h1>Example #01 — Submitting the form</h1>
+
       <input name='firstName' defaultValue='John' ref={register} />
+
       <input
         name='lastName'
         defaultValue='Doe'
         ref={register({ required: true })}
       />
       {errors.lastName && <span>This field is required</span>}
+
       <input type='submit' />
+
+      <DevTool control={control} />
     </form>
   )
 }

src/examples/02.js

@@ -1,9 +1,10 @@
 import { useForm } from 'react-hook-form'
-
 import { instance } from 'api'
+import { DevTool } from '@hookform/devtools'
 
 export const Example02 = () => {
   const {
+    control,
     register,
     handleSubmit,
     errors,
@@ -32,6 +33,8 @@ export const Example02 = () => {
       {errors.lastName && <span>This field is required</span>}
 
       <input type='submit' disabled={isSubmitting} />
+
+      <DevTool control={control} />
     </form>
   )
 }

src/examples/03.js

@@ -1,5 +1,6 @@
 import { useForm } from 'react-hook-form'
 import { instance } from 'api'
+import { DevTool } from '@hookform/devtools'
 import { yupResolver } from '@hookform/resolvers/yup'
 import * as yup from 'yup'
 
@@ -10,6 +11,7 @@ const schema = yup.object().shape({
 
 export const Example03 = () => {
   const {
+    control,
     register,
     handleSubmit,
     errors,
@@ -39,7 +41,7 @@ export const Example03 = () => {
 
       <input type='submit' disabled={isSubmitting} />
 
-      <pre>{JSON.stringify(errors, null, 2)}</pre>
+      <DevTool control={control} />
     </form>
   )
 }

src/examples/04.js

@@ -1,5 +1,6 @@
 import { useForm, FormProvider, useFormContext } from 'react-hook-form'
 import { instance } from 'api'
+import { DevTool } from '@hookform/devtools'
 import { yupResolver } from '@hookform/resolvers/yup'
 import * as yup from 'yup'
 
@@ -10,7 +11,7 @@ const schema = yup.object().shape({
 
 export const Example04 = () => {
   const formProps = useForm({ resolver: yupResolver(schema) })
-  const { handleSubmit } = formProps
+  const { control, handleSubmit } = formProps
 
   const onSubmit = async () => await instance.post('/created')
 
@@ -24,6 +25,8 @@ export const Example04 = () => {
         <Input name='lastName' defaultValue='Doe' />
 
         <Button type='submit' />
+
+        <DevTool control={control} />
       </form>
     </FormProvider>
   )

src/examples/05.js

@@ -1,5 +1,6 @@
 import { useForm, FormProvider, useFormContext } from 'react-hook-form'
 import { instance } from 'api'
+import { DevTool } from '@hookform/devtools'
 import { yupResolver } from '@hookform/resolvers/yup'
 import * as yup from 'yup'
 
@@ -10,7 +11,7 @@ const schema = yup.object().shape({
 
 export const Example05 = () => {
   const formProps = useForm({ resolver: yupResolver(schema) })
-  const { handleSubmit, setError } = formProps
+  const { control, handleSubmit, setError } = formProps
 
   const onSubmit = async () => {
     try {
@@ -36,6 +37,8 @@ export const Example05 = () => {
         <Input name='lastName' defaultValue='Doe' />
 
         <Button type='submit' />
+
+        <DevTool control={control} />
       </form>
     </FormProvider>
   )

src/examples/06.js

@@ -0,0 +1,105 @@
+import { useForm, FormProvider, useFormContext } from 'react-hook-form'
+import { instance } from 'api'
+import { DevTool } from '@hookform/devtools'
+import { yupResolver } from '@hookform/resolvers/yup'
+import * as yup from 'yup'
+import { Grid, TextField, Button as MuiButton } from '@material-ui/core'
+import { path } from 'ramda'
+
+const schema = yup.object().shape({
+  firstName: yup.string().required(),
+  lastName: yup.string().required(),
+})
+
+export const Example06 = () => {
+  const formProps = useForm({ resolver: yupResolver(schema) })
+  const { control, handleSubmit, setError } = formProps
+
+  const onSubmit = async () => {
+    try {
+      await instance.post('/example05')
+    } catch ({ response: { data } }) {
+      if (data.firstName) {
+        setError('firstName', { message: data.firstName })
+      }
+
+      if (data.lastName) {
+        setError('lastName', { message: data.lastName })
+      }
+    }
+  }
+
+  return (
+    <FormProvider {...formProps}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <Grid container spacing={2}>
+          <Grid item xs={12}>
+            <h1>
+              Example #06 — Making it look nice with @material-ui (but is
+              doesn&apos;t work)
+            </h1>
+          </Grid>
+          <Grid item xs={4}>
+            <Input name='firstName' defaultValue='John' label='First name' />
+          </Grid>
+          <Grid item xs={4}>
+            <Input name='lastName' defaultValue='Doe' label='Last name' />
+          </Grid>
+          <Grid item xs={4}>
+            <Button type='submit' />
+          </Grid>
+        </Grid>
+        <DevTool control={control} />
+      </form>
+    </FormProvider>
+  )
+}
+
+const Input = ({ name, label, defaultValue = '' }) => {
+  const {
+    register,
+    formState: { isSubmitting },
+    errors,
+  } = useFormContext()
+
+  const disabled = isSubmitting
+  const helperText = path([name, 'message'], errors)
+  const error = Boolean(helperText)
+
+  return (
+    <>
+      <TextField
+        name={name}
+        label={label}
+        defaultValue={defaultValue}
+        ref={register}
+        disabled={disabled}
+        helperText={helperText}
+        error={error}
+        variant='filled'
+        fullWidth
+      />
+    </>
+  )
+}
+
+const Button = ({
+  children = 'Submit',
+  variant = 'outlined',
+  fullWidth = true,
+  ...props
+}) => {
+  const {
+    formState: { isSubmitting },
+  } = useFormContext()
+
+  return (
+    <MuiButton
+      {...props}
+      disabled={isSubmitting}
+      variant={variant}
+      fullWidth={fullWidth}>
+      {children}
+    </MuiButton>
+  )
+}