✨ Introducing to you: new hooks 🐺 - Authentication and Forms made easy.

useReactHookForm

Simplifies React Hook Form setup and usage.

useReactHookForm
Simplified React Hook Form usage

Installation

Props

PropTypeDefaultDescription
options?UseFormProps<T>undefinedOptions passed to React Hook Form's useForm

See useForm for more details about the options.

Data

PropertyTypeDescription
onSubmit(onValid, onInvalid?) => (e?) => Promise<void>Simplified and memoized submit handler
...methodsUseFormReturn<T>All methods returned by useForm (register, reset, etc.)

Key Features & Details

  • Built on React Hook Form – see React Hook Form Docs for full API.
  • Simplified onSubmit signature wraps React Hook Form's handleSubmit.
  • Memoized handler with useCallback to prevent unnecessary re-renders.
  • Exposes all useForm methods (register, reset, formState, etc.).
  • Optional debug logging of formState changes in development mode.

Common Use Cases

  • Single-field forms with basic validation (e.g., login, search).
  • Multi-field forms with default values and complex submissions.
  • Handling submission and validation separately with onInvalid.
  • Resetting or clearing forms after submission.
  • Rapid prototyping of form-driven UIs.

Examples

Basic Usage

const {
  register,
  onSubmit,
  formState: { errors },
} = useReactHookForm<{ firstName: string }>({
  defaultValues: { firstName: '' },
});
 
return (
  <form onSubmit={onSubmit((data) => alert(`Hello, ${data.firstName}!`))}>
    <div>
      <label htmlFor="firstName">First Name</label>
      <input
        id="firstName"
        {...register('firstName', { required: 'First name is required' })}
      />
      {errors.firstName && <span>{errors.firstName.message}</span>}
    </div>
    <button type="submit">Submit</button>
  </form>
);

Handling Validation Errors

const {
  register,
  onSubmit,
  formState: { errors },
} = useReactHookForm<{ email: string }>({
  defaultValues: { email: '' },
});
 
const handleValid = (data) => {
  console.log('Valid Data:', data);
};
 
const handleInvalid = (err) => {
  console.log('Validation Errors:', err);
};
 
return (
  <form onSubmit={onSubmit(handleValid, handleInvalid)}>
    <div>
      <label htmlFor="email">Email</label>
      <input
        id="email"
        {...register('email', { required: 'Email is required' })}
      />
      {errors.email && <span>{errors.email.message}</span>}
    </div>
    <button type="submit">Submit</button>
  </form>
);

Resetting the Form

const { register, onSubmit, reset } = useReactHookForm<{ firstName: string }>({
  defaultValues: { firstName: 'John' },
});
 
const handleValid = (data) => {
  console.log('Submitted:', data);
  reset({ firstName: '' });
};
 
return (
  <form onSubmit={onSubmit(handleValid)}>
    <div>
      <label htmlFor="firstName">First Name</label>
      <input id="firstName" {...register('firstName')} />
    </div>
    <button type="submit">Submit</button>
    <button type="button" onClick={() => reset()}>
      Reset
    </button>
  </form>
);

Related