title: How to compose react-hook-form into component
body: <p>I'm trying to use <code>react-hook-form</code> (<a href="https://react-hook-form.com/" rel="nofollow noreferrer">https://react-hook-form.com/</a>) first time.
  I don't know how to compose them into react components with redux.</p>
  
  <pre><code>import React from 'react'
  import useForm from 'react-hook-form'
  
  export default function SampleForm() {
      const { register, handleSubmit, watch, errors } = useForm()
      const onSubmit = data =&gt; { console.log(data) }
  
      console.log(watch('example')) // watch input value by passing the name of it
  
      return (
          &lt;form onSubmit={handleSubmit(onSubmit)}&gt;
              &lt;input name="example" defaultValue="test" ref={register} /&gt;
              &lt;input name="exampleRequired" ref={register({ required: true })} /&gt;
              {errors.exampleRequired &amp;&amp; &lt;span&gt;This field is required&lt;/span&gt;}
              &lt;input type="submit" /&gt;
          &lt;/form&gt;
      );
  }
  </code></pre>
  
  <pre><code>import React, { Component } from "react";
  import { connect } from "react-redux";
  import userForm from 'react-hook-form';
  import SampleForm from "./SampleForm";
  
  class Sample extends Component {
      constructor(props){
          super(props);
      }
  
      render() {
          return (
              &lt;SampleForm /&gt;
          );
      }
  }
  
  export default connect()(Sample);
  </code></pre>
  
  <p>Does anyone help me?</p>