❌️react-decode-form
アプリケーション内部と外部のデータ構造をちゃんと切り分けるためのform用のhooks
モチベーション
内部と外部のデータ構造を分けて管理したい
内部と外部の境界となるform部分で、正しいデータ構造に変換したい
実現するためには以下の4つのパーツが必要
①外部世界のための構造
ユーザ目線の単位
例えば、MM, CM, Mなど
※ ただし、stringにスッと変換できる構造である必要がある
②内部世界のための構造
正しいデータ型
アプリケーション内で扱う単位を統一するなら、例えば全てMMにしたい
それらを相互に変換する関数たち
③内部→外部
validationも担う
④内部←外部
例
code:ts
import { useForm, FormSchema } from 'react-decode-form';
const schema = {
width: {
in: MM, // ①
ex: CM, // ②
i2e: mm2cm, // ③
e2i: cm2mm, // ④
},
heihgt: {
in: MM, // ①
},
} satisfies FormSchema;
const Form: React.FC = () => {
const { register, values } = useForm(schema, {
defaultValues: {
width: mkMM(0),
},
});
const width = values.width; // number
const height = values.heihgt; // number | null
return (
<div>
<input {...register('width')} type="number" />
<input {...register('height')} type="number" />
</div>
);
};
ポイント
schmea定義で①〜④を指定できる
特に変換が必要ないなら②~④は省略可
react-hook-formとほぼ同じAPIを用意している
register, getValue, setValue, errors, <Controller/>, etc.
型に嘘がない
getValue()やvaluesでは、内界の正しいデータ構造が得られる
型安全である
getValue()やvaluesの型は内界の型
defaultValuesを指定しなかったfieldの型はT | nullになる
todos
bundlerとか
概要を書く
readme
defaultValueを指定しなかったときに、初期表示の時点でvalidation errorが表示されてしまう
Valuesの型の扱いが難しくなってしまった
ReturnType使うか、手動でkeyを指定してOmitする感じにするとか...
nestしたschemaのサポート
context系
型のテスト
異常系の実装とテストがなさすぎ
パフォーマンスのことを全然考えてない
頑張れば非制御にできるかもしれないが