Allow using a custom Input component (like asChild in Radix UI)

[amotarao]

Hello, and thank you for maintaining this fantastic library! I’m currently using @uiw/react-color-editable-input and would love to use my own custom Input component while retaining the existing color input functionality.

Why this would be helpful:

Maintains consistent styling and behavior across my application
Prevents the need to reinvent color input logic
Aligns with patterns like Radix UI’s asChild, offering flexibility in component composition
Would you consider adding a prop or similar mechanism to allow replacing the default Input component with a custom one?

[jaywcjlove]

@amotarao Do I need to add a renderInput prop?

export interface EditableInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
  //.....
  renderInput?: (props: React.InputHTMLAttributes<HTMLInputElement>) => React.ReactNode;
}

<EditableInput
  label="Hex"
  value={hsvaToHex(hsva)}
  style={{ width: 68, alignItems: 'flex-start' }}
  renderInput={(props) => {
    return <input {...props} />
  }}
/>

[amotarao]

@jaywcjlove I think that’s also a good approach! Once renderProps is added, this issue will likely be resolved.

[jaywcjlove]

@amotarao Upgrade v2.4.0

[amotarao]

@jaywcjlove It worked perfectly. Thank you!