Play react-hook-form

typescript vite react react-hook-form classnames bootstrap

source code
demo

What react-hook-form?

Performant, flexible and extensible forms with easy-to-use validation.

How to use

Import module

// app.tsx
import { useForm, SubmitHandler } from "react-hook-form";

• useForm: A hook create HTML form
• SubmitHandler: submit form function type

const {
    register,
    handleSubmit,
    formState: { errors: formErrors },
} = useForm<formProps>();

<form onSubmit={handleSubmit(onSubmit)}>
    <input
    className={classNames({
        "form-control": true,
        "is-invalid": formErrors.text,
    })}
    id="text"
    type="text"
    autoComplete="off"
    placeholder="Please input text"
    {...register("text", { required: true, maxLength: 10 })}
    />;
    <button type="submit" className="btn btn-primary">
        Submit
    </button>
</form>

• register: for regist form input component
• handleSubmit: A function bind HTML form onSubmit event
• formState: have errors attribute to get form error state