Invalid Hook Call

[ButlerBorst]

Been trying to get this package to work inside a functional component to no avail. Keep getting an invalid hook call warning. I've tried importing both two ways.

import {Eyedropper} from 'react-eyedrop & import Eyedropper from 'react-eyedrop'

and then in my return am using the base example onChange call.

<Eyedropper onChange={myOnChange} />

[jodhman]

Hey @ButlerBorst! I would love to help.

Could you share how to reproduce the issue you're having? Alternatively a minimal example of the code where you're implementing react-eyedrop.

That will help me pinpoint the problem you're experiencing. :-)

[jodhman]

I might've stumbled on your issue while working on it today. Just released a new version 5.0.4. Go ahead & try that. 🙂 Let me know if the issue persists!

[ButlerBorst]

Awesome, thx for the bump. I'll be testing this out this afternoon and will report my results. If I still have the issue I'll leave more details about my use case, and if it's fixed I'll close the issue.

[ButlerBorst]

@jodhman Your fix for incorporating this in a functional component seems to have worked! I see the component rendering. However when I click to pick a color I'm now getting a type error. My react project is utilizing typescript for what it's worth.

For clarity here is my current setup of the Eyedropper. There's more going on in the component than this, but this is what's pertinent to the eyedropper. Once I see that log fire I should be good to go. Thanks for your help on this. Looking forward to utilizing as a component for the project.

import { EyeDropper } from 'react-eyedrop

function onChange({ rgb, hex }: any) { console.log(rgb, hex) }

<EyeDropper onChange={onChange} />

[jodhman]

@ButlerBorst I'm glad to hear it! It seems like the image upload didn't go through - can't see the type error. 😞

Something I could be more clear about in the README is a type for the onChange parameters: https://github.com/jodhman/react-eyedrop/blob/d6fe8932f151483db3b43542b932a145ddccf70b/src/types.ts#L7-L11 so..

import { EyeDropper, OnChangeEyedrop  } from 'react-eyedrop

function onChange({ rgb, hex }: OnChangeEyedrop ) { console.log(rgb, hex) }

<EyeDropper onChange={onChange} />

Let me know if that was the issue, and if not, please copy+paste/screenshot the type error for me. :blush:

[ButlerBorst]

[ButlerBorst]

I don't think it's the actually typing of the {rgb, hex} that is the issue. Apologies, looks like my first screen shot didn't go through. This error happens after I try selecting a color.

[jodhman]

Just tried something in v. 5.0.5. Let me know if that solves it! :slightly_smiling_face:

[ButlerBorst]

Getting a similar, but different error. I am still using the OnChangeEyeDrop as prop type and am on version 5.0.5. Will test again when there's an update

[jodhman]

Damm... Alright. I'm gonna have to try & reproduce it locally. I'll let you know once I have!

[ButlerBorst]

Sounds good! Good luck to ya. Let me know if you need any other info on my end.

[jodhman]

Wanted to give a quick heads-up; you're not forgotten. Been super-busy these past few weeks. Will soon find enough time to go through it thoroughly.

[ButlerBorst]

Thx for the update! Let me know if I can be of any help. Could even find time to screen share if it would be helpful.

[justinpchang]

@ButlerBorst @jodhman I hit the same problem. If you check out lines 117 and 118 of eyeDropper.tsx:

const { offsetX, offsetY } = e
html2canvas.default(target, { logging: false })
.then(...

It seems like the transpiled JS combines those lines into ... e(html2canvas).default...

The solution should be to use semicolons strictly throughout the package.

[justinpchang]

@jodhman To reproduce, create a new project using the npm installed package rather than the source. Then use the eyedropper as normal and the error will appear. I installed source in my project and placed semicolons everywhere and it worked. I can submit a PR this weekend.

[jodhman]

Wow! Nicely caught, @justinpchang. I'll gladly merge in your PR then :tada:

[jodhman]

@ButlerBorst Go ahead & give 5.1.0 a try :slightly_smiling_face:

[mfouquet]

@jodhman Dropping in here since I also had the same issue. 5.1.0 fixed this issue for me (e is not a function): https://github.com/jodhman/react-eyedrop/issues/29#issuecomment-788132934

But now this one is back (html2canvas.default is not a function): https://github.com/jodhman/react-eyedrop/issues/29#issuecomment-786952749

[jodhman]

Ah, crap. Thought I could get away with just adding the semi-colons. Looks like I'll need to sit down & debug - will aim to have it done within the week.

[jodhman]

~~Got it to work locally with v. 5.1.1. Please let me know if that works for you~~ Hold on...

EDIT v. 5.1.3 confirmed working. Please let me know if that works for you :smile:

[jodhman]

Closing as someone else confirmed it working: https://github.com/jodhman/react-eyedrop/issues/30