DEV Community

Avnish Jayaswal
Avnish Jayaswal

Posted on • Edited on

1 2

how to use react hook form

how to install react hook form using npm

npm i react-hook-form

how to use React hook form on submit


import React from "react";
import { useForm } from "react-hook-form";
import "bootstrap/dist/css/bootstrap.min.css";

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

  return (
    <section class="login-block">
      <div className="container-fluid auth-box card">
        <form onSubmit={handleSubmit(onSubmit)}>
          <div className="row">
            <div className="md-col-6 offset-4 mt-3">
              <input
                type="text"
                className="form-control"
                placeholder="First name"
                name="First name"
                ref={register({ required: true, maxLength: 80 })}
              />
            </div>
          </div>

          <div className="row">
            <div className="md-col-6 offset-4 mt-3">
              <input
                className="form-control"
                type="text"
                placeholder="Last name"
                name="Last name"
                ref={register({ required: true, maxLength: 100 })}
              />
            </div>
          </div>

          <div className="row">
            <div className="md-col-6 offset-4 mt-3">
              <input
                className="form-control"
                type="text"
                placeholder="Email"
                name="Email"
                ref={register({ required: true, pattern: /^\S+@\S+$/i })}
              />
            </div>
          </div>

          <div className="row">
            <div className="md-col-6 offset-4 mt-3 mb-3">
              <input type="submit" />
            </div>
          </div>
        </form>
      </div>
      <div className="row">
        <div className="md-col-6 offset-4 mt-3">
          <a href="https://askavy.com/react-hooks-forms/">React-hooks-forms</a>{" "}
          , -<a href="https://askavy.com/">React</a>
        </div>
      </div>
    </section>
  );
}

Enter fullscreen mode Exit fullscreen mode

Code example on codesandbox.io

https://codesandbox.io/s/react-hook-form-askavy-0erju

Source : react hooks forms

Image of Quadratic

Free AI chart generator

Upload data, describe your vision, and get Python-powered, AI-generated charts instantly.

Try Quadratic free

Top comments (0)

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

👋 Kindness is contagious

Engage with a wealth of insights in this thoughtful article, valued within the supportive DEV Community. Coders of every background are welcome to join in and add to our collective wisdom.

A sincere "thank you" often brightens someone’s day. Share your gratitude in the comments below!

On DEV, the act of sharing knowledge eases our journey and fortifies our community ties. Found value in this? A quick thank you to the author can make a significant impact.

Okay