Why the onChange props is different between components ?

[MatteoGauthier]

Hey I wanted to know how to manage different onChange props from mantine components.

// onChange argument is a string
<ColorInput
  onChange={(color) => handleChange("button-color", color)}
  id="button-color"
  placeholder="Pick color"
  swatches={availableColors}
  withPicker={false}
  swatchesPerRow={6}
  disallowInput
/>

// onChange is a native Event
<Switch
  id="button-shadow"
  onChange={(event: React.ChangeEvent<HTMLInputElement>) =>
    handleChange("button-shadow", event.target.checked)
  }
  onLabel="ON"
  offLabel="OFF"
  label={"I agree to sell my privacy"}
  radius={"lg"}
  size="md"
  classNames={{
    label: "text-sm pl-2 mb-0.5",
  }}
/>

[rtivital]

Because some components do not have access to event, when event is available, it is always provided to onChange handler. You can use use-input-state hook to handle that.

[MatteoGauthier]

Thanks for your answer 👌. I saw that in the hooks a function getInputOnChange is exported, how can I use it ? Because I don't want to use the useInputState hook as it is for a unique input.

[rtivital]

You should not use undocumented exported functions, they can change at any moment.

[MatteoGauthier]

Okay