Feature: custom input registration

I think we could improve the DX a bit just by exporting the registered input already as a prop.

Currently if we want to make a custom input we need to do this:

<Field name="email">
  {({ Label, Errors }) => (
    <>
      <Label />
      <input
        type="email"
        {...register('email')}
        className="border-2 border-dashed rounded-md"
      />
      <Errors />
    </>
  )}
</Field>

Since the Field has the name it would make sense to just do this

<Field name="email">
  {({ Label, Errors, props }) => (
    <>
      <Label />
      <input type="email"  {...props}  className="border-2 border-dashed rounded-md" />
      <Errors />
    </>
  )}
</Field>

[samjohnduke]

Note - For those who see the above and a wondering whats going on. When using Controller, if the render of the controller doesn’t put a hidden or otherwise input into the dom, this won’t work. So its a matter of adding

<Controller
  name="dateStart"
  control={control}
  render={({ field }) => (
    <>
     <input name={field.name} value={field.value} type="hidden" />
      <Calendar
        id={field.name}
        value={field.value}
         onChange={(e) => field.onChange(e.value)}
       />
    <>
  )}
/>

Hope this helps

[danielweinmann]

Yup, the register approach is for uncontrolled components only. If you’d like to make it work with controlled components, you’ll need to use Controller or implement value and onChange by hand, using setValue to set the value.

But I think the API you suggested is good for uncontrolled custom inputs. I’ll leave the issue open until we implement it.