React Hook Form

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

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

We follow this format since 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 have interacted with.

Since by default, React Hook Form is expecting onChange to return an event – you will need to use a 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 will let you pass any Reshaped input component to the render property of the Controller and customize the way onChange is handled. You can find more examples in the React Hook Form official documentation.