Form composition, using custom form field without children prop

Is there a recommended way to make using custom form fields even more succinct?

<form.AppField
    name="firstName"
    children={(field) => <field.TextField label="First Name" />}
/>

<form.AppField
    name="firstName"
    children={(field) => <field.TextField label="First Name" />}
/>

<form.AppField
    name="firstName"
    children={(field) => <field.TextField label="First Name" />}
/>

<form.AppField
    name="firstName"
    children={(field) => <field.TextField label="First Name" />}
/>

This is still quite annoying for me, I'd rather just write

<form.AppTextField
    name="firstName"
    label="First Name"
/>

<form.AppTextField
    name="firstName"
    label="First Name"
/>

<form.AppTextField
    name="firstName"
    label="First Name"
/>

<form.AppTextField
    name="firstName"
    label="First Name"
/>

With react-hook-form this is trivial since the components don't live in the form that is returned from the use(App)Form hook but are just imported components

What I want is of course possible by using a custom hook that wraps

useAppForm

useAppForm

useAppForm

useAppForm. I'm just wondering if there is a recommended way.

Form composition, using custom form field without children prop

Similar Threads

Similar Threads

Similar Threads