Better documentation?

[gundamftw]

The examples are very hard to follow. For example, the customComponent example, I copied everything and ran it. I clicked the button and click on any area in the browser to get a color, and it gave me the error

Uncaught (in promise) TypeError: y.props.onChange is not a function

I need more detail on what to do.

[jodhman]

Hi there @gundamftw! The one required prop to pass down to the EyeDropper in order to make it work is a callback function called 'onChange'. In your case, something like this should work:

function yourCallbackFunction(colors) {
  /* Do stuff */
}

return(
  <EyeDropper onChange={yourCallbackFunction} customComponent={/* Your custom component */}
)

Let me know if that helped. :smile:

[gundamftw]

Hi, it worked. I didn't know that you can use them together.

The two lifecycle hooks onPickStart and onPickEnd need better examples too to show their usefulness. For me, they allow me to run two functions on a single click when triggering the event. For example I can have an onChange handler to store the droppedColor value to state, and then have another function to set that color value to an input field with along with other arguments.

[jodhman]

For the lifecycle hooks, I chose to give functional examples instead of practical examples simply to show what it's for. The reason for keeping things abstract is to focus on the minimum amount that is necessary to make things work, and only that.

But you might be right about the fact that more practical examples would be nice to have in the documentation. Perhaps another sub-section... :slightly_smiling_face: Will add this in the backlog.