CODEWITHSUNDEEP
javascriptreactjs
user6329530
user6329530

Reputation: 734

How can I add an event to react component?

I am using react-color. It provides two build in events: onChange and onChangeComplete. While onChange fires in realtime when operating the color picker, onChangeComplete only fires when holding still for a short time.

However for my case, onChangeComplete does still fire too often because it seems to have a short timeout (like 500ms or something), not only when releasing the mouse button.

I need an event to really finalize a color picking and send it to all components that need to know it. This would be when the user releases the mouse button.

<SketchPicker
    onChange={(color) => { //fires all the time as it should
       handleChange(color);
    }}
    onChangeComplete={(color) => { //fires when stopping mouse movement for a short time
         handleChangeComplete(color); //Ok for setting local component state variables
    }}
    onMouseUp={(color) => { //not firing at all
         handleFinalChange(color); //supposed to run, when the user released mouse to promote it to React
    }}
/>

onMouseUp supposed to be an event React provides and it works in plain divs but for some reason not in components provided by this package. How do I add a custom event to the component here?

Upvotes: 1

Views: 202

Answers (1)

emeraldsanto
emeraldsanto

Reputation: 4741

You can either wrap the library component in a div and bind onMouseUp to it, or you'll need to modify the source code for that library.

Upvotes: 2

Related Questions