Adding a color change "end" event

[fitzmode]

A common pattern in React is to have global state management. Even with debouncing, frequent updates on any moderately large global state is expensive. Would it be possible to add a changeEnd event that returns a final value based on perhaps on internal mouseup event of the different color pickers?

This would allow updating state once on user input completion.

An example use case would be - considering the color picker for the graphic design tool canva.com - where color updates are reflected in real time on elements the user is editing. This part of the problem can perhaps be handled imperatively. However, we would still need to update the state with the final value to sync it with imperatively updated values. This is where an changeEnd event would be useful.

Happy to hear feedback and if you'd be open to me working on a PR.

Thanks.

[BastianJunker]

This would be very useful for me too

[Karniej]

Good idea +1

[theashraf]

+1

[mikeKlech]

+1

[mikeKlech]

It will be useful for undo/redo functionality. I have already implemented your color picker and it works really well, but without this functionality I have to rolling back the changes.

You can just add extra parameter to onChange event. For example

onChange(ops: {
  color: string;//HEX
  stage: 'start' | 'progress' | 'end'//start - mouseDown, progress - mouseMove, end - mouseUp
}) => void;

Thank you in advance!

[mikeKlech]

It will be useful for undo/redo functionality. I have already implemented your color picker and it works really well, but without this functionality I have to rolling back the changes.

You can just add extra parameter to onChange event. For example

onChange(ops: {
  color: string;//HEX
  stage: 'start' | 'progress' | 'end'//start - mouseDown, progress - mouseMove, end - mouseUp
}) => void;

Thank you in advance!

If someone looking for temporary solution. You can add mouse down\move\up(don't forget about touch events as well) events(or more easier - use react-use-gesture library) to the extra div which is wrapper for ColorPicker