How to use react-hook-form inside class Component?

You can't use hooks in react class components. The class that you provide looks small and I think that you can easily rewrite it to functional component. Perhaps you don't want to, you can provide hoc with useForm hook that wraps your class component.

export const withUseFormHook = (Component) => {
    return props => {
        const form = useForm();
        return <Component {...props} {...form} />
    }       
}

And in you SignIn component simply do:

export default withUseFormHook(SignIn);

After searching more and more I used this solution :
Creating a separate file with the hook version :

import React from 'react'

import { Button, Form, FormGroup, Label, Input } from 'reactstrap';
import { useForm } from 'react-hook-form';

const SignInHook = () => {

    const { register, handleSubmit, errors } = useForm();
    const onSubmit = data => console.log(data);
    console.log(errors);



    return (
    <>
      <div>
        <Form onSubmit={handleSubmit(onSubmit)}>

            <Label>Email : </Label>
            <Input type="email" placeholder="email" name="email" ref={register({required: true, pattern: /^\S+@\S+$/i})}></Input>

            <Label>Password : </Label>
            <Input type="password" placeholder="password"  name="password" ref={register({required: true, min: 8, maxLength: 20})}></Input>

        </Form>
      </div>
    </>
   )
}

export default SignInHook

And Use it inside my Class Component:

import React from 'react';
import SignInHook from './SignInHook';

class SignIn extends React.Component {
  
  render() {
    return (
      <div>
        <SignInHook></SignInHook>
      </div>
    );
  }
}


export default SignIn;

From the react-hook-form documentation:

Does it work with Class Components?

No, not out of the box. If you wanted to do this, you could build a wrapper around it and use it in your Class Component.

https://react-hook-form.com/faqs#DoesitworkwithClassComponents

I had the same issue but at the end I could solve it like this:

import React from "react";
import ReactDOM from "react-dom";
import { useForm } from "react-hook-form";

import "./styles.css";

class Login extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      loading: false
    };
    this.onSubmit = this.onSubmit.bind(this);
  }

  onSubmit(data) {
    console.log(data);
  }

  render() {
    const { register, handleSubmit, errors } = this.props;
    return (
      <form onSubmit={handleSubmit(this.onSubmit)}>
        <label>Example</label>
        <input name="example" defaultValue="test" ref={register} />
        <label>ExampleRequired</label>
        <input
          name="exampleRequired"
          ref={register({ required: true, maxLength: 10 })}
        />
        {errors.exampleRequired && <p>This field is required</p>}
        <input type="submit" />
      </form>
    );
  }
}

function App(props) {
  const form = useForm();
  return <Login {...props} {...form} />;
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Here is the live sandbox.

If you use the following code it works:

class SignIn extends React.Component {
...
  render() {
    const {
      register,
      formState: { errors },
      handleSubmit } = (() => useForm({ mode: "onChange" }))();
    return (...);
  }
}

is it a good practice do it?