examples(RHF): support for default{Value,Checked} & useFieldArray

[koichik]

Support for defaultValue

Use registerWithDefaultValue instead of register:

const { registerWithDefaultValue, ... } = useFormSync<FormState>(formState({ name: 'Foo' }))
...
  <input type="text" {...registerWithDefaultValue('name')} />

Even SSR/SSG, it is rendered with default values.

Support for defaultChecked

Use registerWithDefaultChecked instead of register

const { registerWithDefaultChecked, ... } = useFormSync<FormState>(formState({
  selectOne: '1', // for radio
  selectMany: ['1', '2'], // for checkbox
}))
...
  <input type="radio" {...registerWithDefaultChecked('selectOne', '1') /* defaults to checked */} />
  <input type="radio" {...registerWithDefaultChecked('selectOne', '2') /* defaults to not checked */} />
  <input type="radio" {...registerWithDefaultChecked('selectOne', '3') /* defaults to not checked */} />

  <input type="checkbox" {...registerWithDefaultChecked('selectMany', '1') /* defaults to checked */} />
  <input type="checkbox" {...registerWithDefaultChecked('selectMany', '2') /* defaults to checked */} />
  <input type="checkbox" {...registerWithDefaultChecked('selectMany', '3') /* defaults to not checked */} />

Support for useFieldArray

Use useFieldArraySync returns from useFormSync instead of useFieldArray:

const { useFieldArraySync, control, ... } = useFormSync<FormState>(formState({items: [{value: 1}, {value: 2}] })
const { fields, ...} = useFieldArraySync({ control, name: 'items' })
...
  {fields.map((field, index) => (
    <input key={field.id} {...register(`items.${index}.value` as const)} />
  ))}

Of course, it is possible to use registerWithDefaultValue instead of register.

[AkifumiSato]

I asked a few questions, but LGTM.
Thanks!

[AkifumiSato]

imo: RHFのuseFieldArrayはimportして使うと思うので、↓みたくしてimprot { useFieldArraySync }して使うというのは微妙ですかね？
その方がhooksっぽいかなって気もしたものの、自信ないのでご意見いただきたいです🙇‍♂️

const { ... } = useFieldArraySync({
  onChangeForm,
  props,
})

[koichik]

最初はまさにそのつもりだったのですが、将来onChangeForm()以外を渡さないといけなくなる可能性を考えると最初からクロージャにしちゃった方がいいだろうと思いました
別案としてはuseFormSync()からラップしたcontrolを返してそれをuseFieldArraySync()に渡すというのも考えたのですが、ラップするオブジェクトが増え続けるのもどうかかと思いクロージャ案を選びました
useFormSync()するコンポーネントとuseFieldArraySync() するコンポーネントが分かれる場合はcontrolをラップするのが一番使い勝手がいい気はします
他の2案ではcontrolに加えてuseFieldArraySyncかonChangeFormのどちらかも一緒に子コンポーネントに渡さないといけないので

[koichik]

これの結論が出るまでマージ保留にします

[AkifumiSato]

将来onChangeForm()以外を渡さないといけなくなる可能性を考えると最初からクロージャにしちゃった方がいいだろうと思いました

確かにですね...
方針納得しました！

useFormSync()するコンポーネントとuseFieldArraySync() するコンポーネントが分かれる場合はcontrolをラップするのが一番使い勝手がいい気はします

一応知っておきたいんですが、ラップするというのは↓みたいなイメージであってますか？

const { control } = useFormSync(...)
// controlはRHFのcontrol + onChangeForm

[koichik]

そのイメージです

[koichik]

方針納得しました！

とのことなのでこれでマージします！