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>
);
}
Code example on codesandbox.io
https://codesandbox.io/s/react-hook-form-askavy-0erju
Source : react hooks forms
Top comments (0)