The version 10.1.8 has issue with onLoad function

[farhapartex]

The version 10.1.8 is unable to make the preview of cropped image. The example code doesn't show how to do download. Also the example here https://codesandbox.io/s/react-image-crop-demo-with-react-hooks-0h4db?file=/src/App.js:2697-3076 doesn't work properly with the version 10.1.8
I moved to version 9.0.4 with works fine as like the example.

[dominictobias]

When you say doesn't work what do you mean? I just tried https://codesandbox.io/s/react-image-crop-demo-with-react-hooks-y831o?file=/src/App.tsx in Chrome 116 and it downloaded fine

[farhapartex]

The example in the sandbox works fine, please read below points:

• The version I installed in my react app was: 10.1.8
• This version only show the uploaded image if I use img tag inside of ReactCorp but if I use only ReactCorp like the sandbox, the image doesn't come up
• The Github repo has example with img tag, but sandbox example is without img tag
• with the version: 10.1.8 if I crop image, the canvas is None, so nothing happened
• To make sure, I did copy & paste the sandbox example in my react app and still didn't work
• I removed the version 10.1.8 and installed again 9.0.4 and the sandbox code which I copied works fine & it's now running propely

[dominictobias]

This sounds like an issue with how you set things up but hard to say without seeing code. In v10 <img> goes inside the component and onLoad is not a prop on the library but standard onLoad on the image like in the sandbox:

Anyway glad you got it working in v9

[farhapartex]

Thanks for letting me know. Is it possible to update the repo readme file?

[dominictobias]

Thanks for letting me know. Is it possible to update the repo readme file?

I'm not sure which part of the readme you are referring to?

[farhapartex]

Developer need to use onLoad in img tag, isn't mentioned in the readme file.
So I found others like me having the same issue. So they are trying to implement based on readme file and the sandbox, but example are not matching.
So I asked to add additional example on using of img tag with different callback function like the screenshot you attached above.
hope you got it now

[dominictobias]

onLoad isn't mentioned anywhere in the readme docs except here:

there is an example of using onLoad on the image in the sandbox as well (on the image which is the correct way). So not sure what you mean.

There is a FAQ about an image preview which links to the codesandbox here:

[farhapartex]

could you please try the same code which is in CodeSandbox with the version 10.1.18
I think you will understand.

Thank you for the kind support.

[dominictobias]

The codesandbox linked to in the readme (https://codesandbox.io/s/react-image-crop-demo-with-react-hooks-y831o) is using 10.1.8

[farhapartex]

I was looking this doc: https://codesandbox.io/s/react-image-crop-demo-with-react-hooks-0h4db?file=/src/App.js:2697-3076

[dominictobias]

Ok I think I know what you mean - the v9 readme here https://github.com/DominicTobias/react-image-crop/tree/9.1.1 the hooks sandbox is linking to v10 instead of https://codesandbox.io/s/react-image-crop-demo-with-react-hooks-0h4db