React Hook Form

All Reshaped input components use the same onChange handler argument format, which includes name, value, and event variables:

<TextField onChange={({ name, value, event }) => {}} />

We follow this format because for more complex form fields, there might be no native event available or it might be related to a single element of the form. For example, if you're working with InputCheckboxGroup, value represents an array of selected strings, while event would return the checkbox element you interacted with.

Since by default, React Hook Form expects onChange to return an event, you will need to use Controlled provided by their library.

import { Controller, Control } from "react-hook-form";
import { TextField } from "reshaped";

const FormTextField = (props) => {
  const { name, control } = props;

  return (
    <Controller
      name={name}
      control={control}
      render={({ field: { onChange, value, name, ...fieldProps } }) => (
        <TextField
          name={name}
          onChange={({ event }) => onChange(event)}
          value={value}
          inputAttributes={fieldProps}
        />
      )}
    />
  );
};

export default FormTextField;

This approach allows you to pass any Reshaped input component to the render property of the Controller and customize how onChange is handled. You can find more examples in the React Hook Form official documentation.