react-hook-form v6 simple example

react-hook-form-v6.tsx

import { useState } from 'react';
import { SubmitHandler, useForm } from 'react-hook-form';
import { BrowserRouter, Routes, Route } from 'react-router-dom';
import { isLoggedInVar } from '../apollo';

type Inputs = {
  email: string;
  password: string;
};

export const LoggedOutRouter = () => {
  const {
    register,
    watch,
    handleSubmit,
    formState: { errors },
  } = useForm<Inputs>();

  const onSubmit: SubmitHandler<Inputs> = (data) => {
    console.log(data);
    // isLoggedInVar(true); // updating reactive var
  };

  console.log(watch());

  return (
    <div>
      <h1>LOGIN PAGE</h1>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div>
          <input
            {...register('email', { required: 'Email is required' })}
            id="email"
          />
          {errors.email && (
            <span className="text-red-500">{errors.email.message}</span>
          )}
        </div>
        <div>
          <input
            {...register('password', {
              required: 'Password is required',
              minLength: {
                value: 4,
                message: 'Password should be at least 4 chars long.',
              },
            })}
            id="password"
          />
          {errors.password && (
            <span className="text-red-500">{errors.password.message}</span>
          )}
        </div>

        <button className="bg-yellow-300 text-white">Log In</button>
      </form>
    </div>
  );
};