Add 5 examples

src/examples/01.js

@@ -5,13 +5,18 @@ import { instance } from 'api'
 export const Example01 = () => {
   const { register, handleSubmit, errors } = useForm()
 
-  const onSubmit = async () => await instance.post('/example01')
+  const onSubmit = async () => await instance.post('/created')
 
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-      <input name='example' defaultValue='test' ref={register} />
-      <input name='exampleRequired' ref={register({ required: true })} />
-      {errors.exampleRequired && <span>This field is required</span>}
+      <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' />
     </form>
   )

src/examples/02.js

@@ -0,0 +1,37 @@
+import { useForm } from 'react-hook-form'
+
+import { instance } from 'api'
+
+export const Example02 = () => {
+  const {
+    register,
+    handleSubmit,
+    errors,
+    formState: { isSubmitting },
+  } = useForm()
+
+  const onSubmit = async () => await instance.post('/created')
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <h1>Example #02 — Disabling the form while submitting</h1>
+
+      <input
+        name='firstname'
+        defaultValue='John'
+        ref={register}
+        disabled={isSubmitting}
+      />
+
+      <input
+        name='lastName'
+        defaultValue='Doe'
+        ref={register({ required: true })}
+        disabled={isSubmitting}
+      />
+      {errors.lastName && <span>This field is required</span>}
+
+      <input type='submit' disabled={isSubmitting} />
+    </form>
+  )
+}

src/examples/03.js

@@ -0,0 +1,45 @@
+import { useForm } from 'react-hook-form'
+import { instance } from 'api'
+import { yupResolver } from '@hookform/resolvers/yup'
+import * as yup from 'yup'
+
+const schema = yup.object().shape({
+  firstName: yup.string().required(),
+  lastName: yup.string().required(),
+})
+
+export const Example03 = () => {
+  const {
+    register,
+    handleSubmit,
+    errors,
+    formState: { isSubmitting },
+  } = useForm({ resolver: yupResolver(schema) })
+
+  const onSubmit = async () => await instance.post('/created')
+
+  return (
+    <form onSubmit={handleSubmit(onSubmit)}>
+      <h1>Example #03 — Schema Validation with `yup`</h1>
+
+      <input
+        name='firstName'
+        defaultValue='John'
+        ref={register}
+        disabled={isSubmitting}
+      />
+
+      <input
+        name='lastName'
+        defaultValue='Doe'
+        ref={register()}
+        disabled={isSubmitting}
+      />
+      {errors.lastName && <span>{errors.lastName.message}</span>}
+
+      <input type='submit' disabled={isSubmitting} />
+
+      <pre>{JSON.stringify(errors, null, 2)}</pre>
+    </form>
+  )
+}

src/examples/04.js

@@ -0,0 +1,62 @@
+import { useForm, FormProvider, useFormContext } from 'react-hook-form'
+import { instance } from 'api'
+import { yupResolver } from '@hookform/resolvers/yup'
+import * as yup from 'yup'
+
+const schema = yup.object().shape({
+  firstName: yup.string().required(),
+  lastName: yup.string().required(),
+})
+
+export const Example04 = () => {
+  const formProps = useForm({ resolver: yupResolver(schema) })
+  const { handleSubmit } = formProps
+
+  const onSubmit = async () => await instance.post('/created')
+
+  return (
+    <FormProvider {...formProps}>
+      <form onSubmit={handleSubmit(onSubmit)}>
+        <h1>Example #04 — Create smart form components</h1>
+
+        <Input name='firstName' defaultValue='John' />
+
+        <Input name='lastName' defaultValue='Doe' />
+
+        <Button type='submit' />
+      </form>
+    </FormProvider>
+  )
+}
+
+const Input = ({ name, defaultValue = '' }) => {
+  const {
+    register,
+    formState: { isSubmitting },
+    errors,
+  } = useFormContext()
+
+  return (
+    <>
+      <input
+        name={name}
+        defaultValue={defaultValue}
+        ref={register}
+        disabled={isSubmitting}
+      />
+      {errors[name] && <span>{errors[name].message}</span>}
+    </>
+  )
+}
+
+const Button = ({ children = 'Submit', ...props }) => {
+  const {
+    formState: { isSubmitting },
+  } = useFormContext()
+
+  return (
+    <button {...props} disabled={isSubmitting}>
+      {children}
+    </button>
+  )
+}

src/examples/05.js

@@ -0,0 +1,74 @@
+import { useForm, FormProvider, useFormContext } from 'react-hook-form'
+import { instance } from 'api'
+import { yupResolver } from '@hookform/resolvers/yup'
+import * as yup from 'yup'
+
+const schema = yup.object().shape({
+  firstName: yup.string().required(),
+  lastName: yup.string().required(),
+})
+
+export const Example05 = () => {
+  const formProps = useForm({ resolver: yupResolver(schema) })
+  const { 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)}>
+        <h1>Example #05 — Dealing with errors from the server</h1>
+
+        <Input name='firstName' defaultValue='John' />
+
+        <Input name='lastName' defaultValue='Doe' />
+
+        <Button type='submit' />
+      </form>
+    </FormProvider>
+  )
+}
+
+const Input = ({ name, defaultValue = '' }) => {
+  const {
+    register,
+    formState: { isSubmitting },
+    errors,
+  } = useFormContext()
+
+  return (
+    <>
+      <input
+        name={name}
+        defaultValue={defaultValue}
+        ref={register}
+        disabled={isSubmitting}
+      />
+      {errors[name] && <span>{errors[name].message}</span>}
+    </>
+  )
+}
+
+const Button = ({ children = 'Submit', ...props }) => {
+  const {
+    formState: { isSubmitting },
+  } = useFormContext()
+
+  return (
+    <button {...props} disabled={isSubmitting}>
+      {children}
+    </button>
+  )
+}

src/mocks/browser.js

@@ -1,10 +1,22 @@
 import { setupWorker, rest } from 'msw'
+import { CREATED, UNPROCESSABLE_ENTITY } from 'http-status'
 
 const DELAY_MS = 1000
 
 const handlers = [
-  rest.post('/example01', (req, res, ctx) =>
-    res(ctx.delay(DELAY_MS), ctx.status(201))
+  rest.post('/created', (req, res, ctx) =>
+    res(ctx.delay(DELAY_MS), ctx.status(CREATED))
+  ),
+  rest.post('/example05', (req, res, ctx) =>
+    res(
+      ctx.delay(DELAY_MS),
+      ctx.status(UNPROCESSABLE_ENTITY),
+      ctx.json({
+        firstName: 'Your first name is weird.',
+        lastName:
+          'Your family is banned from our API. Your uncle Ted can tell you why.',
+      })
+    )
   ),
 ]