React hook form

npm install react-hook-form //installation

Source: grepper.com

React hook form

//react hook form with tailwind css
import React from "react";
import { useForm } from "react-hook-form";

export default function App() {
  const { register, handleSubmit } = useForm();
  const onSubmit = data => console.log(data);
   
  return (
    <form className="w-full" onSubmit={handleSubmit(onSubmit)}>
                  <div className="form-control w-full mb-5">
                    <label className="">
                      <span className="text-secondary font-semibold text-lg">
                        Email
                      </span>
                    </label>
                    <input
                      type="text"
                      placeholder="example@email.com"
                      className="input input-bordered w-full rounded-full"
                      {...register('email', {
                        required: {
                          value: true,
                          message: 'Email Required !!!',
                        },
                        pattern: {
                          value: /^[^\s@]+@[^\s@]+\.[^\s@]+$/i,
                          message: 'Invalid Email Provided !!!',
                        },
                      })}
                    />
                    <label className="level font-bold">
                      {errors.email?.type === 'required' && (
                        <span className="label-text-alt text-red-500">
                          {errors.email.message}
                        </span>
                      )}
                      {errors.email?.type === 'pattern' && (
                        <span className="label-text-alt text-red-500">
                          {errors.email.message}
                        </span>
                      )}
                    </label>
                  </div>
                  <div className="form-control w-full">
                    <label className="">
                      <span className="text-secondary font-semibold text-lg">
                        Password
                      </span>
                    </label>
                    <input
                      type="password"
                      placeholder="abcd123$"
                      className="input input-bordered w-full rounded-full"
                      {...register('password', {
                        required: {
                          value: true,
                          message: 'Password Required !!!',
                        },
                        pattern: {
                          value: /(?=.*[!#$%&?^*@~() "])(?=.{8,})/,
                          message:
                            'Password Must be 8 char including a special char !!!',
                        },
                      })}
                    />
                    <label className="level font-bold">
                      {errors.password?.type === 'required' && (
                        <span className="label-text-alt text-red-500">
                          {errors.password.message}
                        </span>
                      )}
                      {errors.password?.type === 'pattern' && (
                        <span className="label-text-alt text-red-500">
                          {errors.password.message}
                        </span>
                      )}
                    </label>
                  </div>         
          <input type="submit" />
    </form>
  );
}

Source: grepper.com

Similar codes

0 vote255 views1 answer
React native cross out letter
Javascript React
-1 vote316 views1 answer
Import ReactDOM from "react-dom";
Javascript React
0 vote317 views1 answer
React '$' is not define
Javascript React
10 votes293 views3 answers
Install firebase react
Javascript React
0 vote297 views2 answers
React toastify dark mode
Javascript React
125 votes442 views6 answers
Create React App command
Javascript React
0 vote302 views1 answer
React s.a.createElement("div",{className:"d-none d-lg-flex flex-content"},s.a.createElement(u.a.Body,{noScroll:!0}
Javascript React
0 vote296 views1 answer
Platform check in react native for status bar color
Javascript React
1 vote309 views1 answer
Adding int and string in react props
Javascript React
1 vote322 views1 answer
React native flatlist pull to refresh
Javascript React