Version 7 | Version 6(日本語)
- パフォーマンスと UX/DX を念頭に構築
- 非制御フォームバリデーション
- UIライブラリと統合し、すぐに利用が可能
- 依存関係がなく、小さいサイズ
- ブラウザのネイティブバリデーションをサポート
- Yup, Zod, Superstruct, Joi, Vest, class-validator, io-ts, nope また custom をサポート
npm install react-hook-form
import React from 'react';
import { useForm } from 'react-hook-form';
function App() {
const {
register,
handleSubmit,
formState: { errors },
} = useForm();
const onSubmit = (data) => console.log(data);
return (
<form onSubmit={handleSubmit(onSubmit)}>
<input {...register('firstName')} /> {/* register an input */}
<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>
);
}
親切で素敵なスポンサー(個人/企業)に感謝します!
すべての支援者(後援者)に感謝します! [支持者(後援者)になる].
素晴らしい組織に感謝します! [貢献する].
素晴らしいコントリビューターに感謝します! [コントリビューターになる].