React Hook Form
最近できたlibraryっぽい
install
$ yarn add react-hook-form
使い方
code:sample.tsx
import React from "react";
import { useForm } from "react-hook-form";
type Inputs = {
example: string,
exampleRequired: string,
};
export default function App() {
hookを宣言する
code:sample.tsx
const { register, handleSubmit, watch, errors } = useForm<Inputs>();
Formを送信したときに実行される関数
code:sample.tsx
const onSubmit = data => console.log(data);
watchでformに入力されている値をreal timeに取得できる
<input>のnameを渡して、値を取得したい部品を指定する
code:sample.tsx
console.log(watch("example"))
HTMLっぽい部分
基本的には、refにregisterを渡せばいい
引数にvalidationの設定を渡せる
{ required: true }で標準のvalidationが有効になる
errorのときに文字列を表示したいときは、required: 'message'と設定する
正規表現で検証したいときはpatternを使う
code:ts
{
required: 'an invalid value',
pattern: {
value: /^\d+:\d+$/,
message: 'Pleas input hh:mm',
}
}
onSubmitに渡す関数はhandleSubmitでwrapする
こうすると値のval
code:sample.tsx
return (
<form onSubmit={handleSubmit(onSubmit)}>
{/* register your input into the hook by invoking the "register" function */}
<input name="example" defaultValue="test" ref={register} />
<input name="exampleRequired" ref={register({ required: true })} />
{errors.exampleRequired && <span>This field is required</span>}
<input type="submit" />
</form>
);
}
Links
多言語対応している
References
日本語訳されたdocumentがすっごい充実している
日本語訳がここまで充実しているthird-party libraryは珍しい気がするtakker.icon
載っているcode sample & 解説
validation
初期値設定
特定の入力値で挙動を変える
入れ子のform
複数画面をまたぐform
いらないときは削除しちゃっていいみたい