---
tags: Ddv Hour
title: Play react-hook-form
---

# Play react-hook-form
`typescript` `vite` `react` `react-hook-form` `classnames` `bootstrap`

[source code](https://gitlab.com/steve-jian/play-react-hook-form)
[demo](https://steve-jian.gitlab.io/play-react-hook-form/)

## 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