[RFC] add @hookform/adapter to customize register return value

[kotarella1110]

Is your feature request related to a problem? Please describe.

It takes some effort to customize register return value.

import { useForm } from "react-hook-form";
import adapter from "@hookform/adapter";

const { register } = useForm();
const { ref, ...rest } = register("fieldName", options);

<TextField inputRef={ref} {...rest} />

ref: #4629

Describe the solution you'd like

Use adapter to allow customize register return value.

import { useForm } from "react-hook-form";
import adapter from "@hookform/adapter";

const { register } = useForm();

<TextField {...adapter(
  register("fieldName", options), 
  ({ ref, ...rest }) => ({
    inputRef: ref,
    ...rest
  })
)} />

Pros

• register doesn't change
• Doesn't increase bundle size
• Flexible

Cons

• Not a builtin, should import a new submodule

Comments

It's just a simple function, users can implement themselves

Describe alternatives you've considered

It is also possible to change the API of register, but I personally do not like it.
https://twitter.com/HookForm/status/1381918850753568773

[paales]

We created something like the following internally, that did work for us, if anyone is looking for something like this

import {
  FieldValues,
  FieldPath,
  RegisterOptions,
  UseFormRegisterReturn,
  UseFormReturn,
} from 'react-hook-form'

export type UseMuiFormRegister<TFieldValues extends FieldValues> = <
  TFieldName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
>(
  name: TFieldName,
  options?: RegisterOptions<TFieldValues, TFieldName>,
) => Omit<UseFormRegisterReturn, 'ref'> & { inputRef: UseFormRegisterReturn['ref'] }

export function useFormMuiRegister<V>({ register }: Pick<UseFormReturn<V>, 'register'>) {
  const muiRegister: UseMuiFormRegister<V> = (name, opts) => {
    const { ref: inputRef, ...fields } = register(name, opts)
    return { ...fields, inputRef }
  }
  return muiRegister
}

[37108]

thanks for your great code !
currently I hit the same problem, how to pass ref object to inputRef easier.
I wrote some code inspired by your.

at first, I simply wrap the register response and format it.

const registerMui = (res: UseFormRegisterReturn) => ({
  inputRef: res.ref,
  onChange: res.onChange,
  onBlur: res.onBlur,
  name: res.name,
})

const Greeting = () => {
  const {register} = uesForm();
 	return (
  	<TextField label="first_name" type="text"
   	  {...registerMui(register('first_name'))}
		/>
  ) 
}

then, I'm trying to make a custom hook. sorry for too many "any" types...

const UseMuiForm = (arg?: any) => {
  const form =  useForm(arg);

  const register = (name: any, option: any) => {
    const response = form.register(name);
    return {
      inputRef: response.ref,
      onChange: response.onChange,
      onBlur: response.onBlur,
      name: response.name,
    }
  }

  return {
    ...form,
    register,
  }
}

I simply checked both of them, but not all operations have been confirmed. so this are introduce about my ideas.
I still try to find the best way.

[jorisre]

For a better DX, I think this one could be under react-hook-form/adapter

[kotarella1110]

You're right! Thank you 👍🏻

[kotarella1110]

I think it would be better for DX to provide adapter as options in register.
I have a new suggestion here.

<TextField
  {...register("filedName", {
    adapter: ({ ref, ...rest }) => ({ inputRef: ref, ...rest }),
    ...options
  })}
/>

[kotarella1110]

I think the API is cleaner and easier to use than option one.
option one is confusing to users because the API does not make it clear whether the field name needs to be specified or not.
The first argument of register should be limited to name, and should not contain any context for customizing the return value.

https://twitter.com/HookForm/status/1381918850753568773

option one:

<TextField {...register(props => ({
    name: "fieldName",
    ...props,
    inputRef: props.ref
  }),
  options
)} />

[kotarella1110]

cc: @bluebill1049 @jorisre

[bluebill1049]

Love the new idea! I like it because it doesn't need to import and it's part of the option. ❤️

[jorisre]

Good one too, but you can't spread props because it contains the ref, you can do something similar:

<TextField {...register(({ ref, ...props })=> ({
    name: "fieldName",
    ...props,
    inputRef: ref
  }),
  options
)} />

[bluebill1049]

you are right @jorisre

[bluebill1049]

Personally, I prefer this syntax that @kotarella1110 suggested:

<TextField
  {...register("filedName", {
    adapter: ({ ref, ...rest }) => ({ inputRef: ref, ...rest }),
    // adapter: ({ ref, ...rest }) => ({ ...rest, inputRef: ref }), works as well
    required: true,
    min: 3,
  })}
/>

especially you don't have to worry about the props order. What do you guys think?

[bluebill1049]

I think this has a limitation with TS because rename is at the runtime.

[JanStevens]

For long forms with a lot of inputs this becomes a bit annoying, why not specify your registerAdapter when using useForm ?

const { register } = useForm({ registerAdapter: ({ ref, ...rest }) => ({
    inputRef: ref,
    ...rest
  })
});

[bluebill1049]

This breaks when u have different ref name for different component. I still think one of the suggestion provided above with a adaptor at your app level is the best solution, adding more code to hook form just make the API more confusing. I have thought about this for weeks, and couldn't make a mind with a good API to cater this.

[JanStevens]

If you use a component library like material-ui its always inputRef, I also doubt you would start mixing those ref names in your own components? For a form with plenty of fields you will need to duplicate this for every input.

[bluebill1049]

Thanks for the feedback. This may be suitable for your application, but it's a library build for a lot of use cases and users do mix things.