react-hook-form: Mapping onChange to a different property - reactjs

Question

I have a radixUI component that takes in an onPressedChange prop. How can I map this to onChange in react-hook-form?
onChange from react-hook-form doesn't accept a custom function that satisfies the typing when I try as per below.
import * as Toggle from "#radix-ui/react-toggle";
import { useForm } from "react-hook-form";
const MyComponent = () => {
const { register, watch, getValues } = useForm();
return (
<div>
<Toggle.Root {...register("basic")} />
<code>watchAll: {JSON.stringify(watch(), null, 2)}</code>
</div>
);
};
I tried spreading it out like below but my functions don't satisfy the onChange typings...
import * as Toggle from "#radix-ui/react-toggle";
import { useForm } from "react-hook-form";
const MyComponent = () => {
const { register, watch, getValues } = useForm();
const { onChange, onBlur, name, ref } = register('basic');
return (
<div>
<Toggle.Root onPressedChange={onChange} onBlur={onBlur} name={name} ref={ref} />
// ^This doesn't work.
// Neither does `onPressedChange={pressed=>onChange(pressed)}`
<code>watchAll: {JSON.stringify(watch(), null, 2)}</code>
</div>
);
};
The onChange prop from react-hook-form accepts the following ChangeHandler:
type ChangeHandler = (event: {
target: any;
type?: any;
}) => Promise<void | boolean>;
and the typing for onPressedChange is:
type OnPressedChangeHandler = (pressed: boolean) => void

Answer 1

One way to map it is to simply use the setValue method from useForm() instead of onChange.
You could use something like this since you know the name of the element, "basic".
const MyComponent = () => {
const { register, watch, setValue } = useForm();
const { onBlur, name, ref } = register("basic");
const onPressedChange = (boolean) => {
setValue("basic", boolean);
};
return (
<div>
<Toggle.Root
onPressedChange={onPressedChange}
onBlur={onBlur}
name={name}
ref={ref}
/>
<code>watchAll: {JSON.stringify(watch(), null, 2)}</code>
</div>
);
};
Working Sandbox:
https://codesandbox.io/p/sandbox/quizzical-spence-ll8mqm