React Hook Form
https://raw.githubusercontent.com/react-hook-form/react-hook-form/master/docs/logo.png
https://react-hook-form.com/
https://github.com/react-hook-form/react-hook-form
React 向けに設計された入力値検証のための React Hooks ライブラリ
TypeScript に対応しており、JavaScript でも使用できる
HTML を参考とした実装で、Input や Textarea などの入力値を検証できる
Yup や Zod、Ajvなどのスキーマ宣言や入力値検証ライブラリと協調動作する
サンプル
公式より
code:tsx
import { useForm } from 'react-hook-form';
function App() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
return (
<form onSubmit={handleSubmit((data) => console.log(data))}>
<input {...register('firstName')} />
<input {...register('lastName', { required: true })} />
{errors.lastName && <p>Last name is required.</p>}
<input {...register('age', { pattern: /\d+/ })} />
{errors.age && <p>Please enter number for age.</p>}
<input type="submit" />
</form>
);
}