Mask is does'nt showing the first time

Hi and thx for this tool !

When i open the crop in a modal, the mask is not showed the first time. If i close the modal and re open, all is perfect...

Thx for your help.

Ok i found the solution, i use the onLoad attribute on the image to set the crop values. It works !

@Djibdjib

@Djibdjib I'm facing the same issue even though I'm using the onLoad attribute. Do you mind sharing what exactly you did to fix it?

@immanu10

@immanu10 Yeah of course !

const onImageLoad = () => {
        setCrop({
            unit: "%",
            width: currentFile.crop.w || 50,
            height: currentFile.crop.h || 50,
            x: currentFile.crop.x || 25,
            y: currentFile.crop.y || 25,
        });
    };

<ReactCrop
                key={crop}
                crop={crop}
                onChange={(c, p) => onChangeCrop(c, p)}
                className="inline-block rounded-lg"
                keepSelection={true}
                ruleOfThirds={true}
            >
                <img src={currentSrcImage} className="rounded-t-lg" onLoad={onImageLoad} />
            </ReactCrop>

Adding some context to this - setting the crop onImageLoad didn't work for me.
The crop dimensions will be correctly set, but the mask itself will be broken.

If you inspect the DOM when this happens, it seems like the of the mask SVG has 0x0 dimensions.
I was able to force refresh it on load by doing
document.querySelector(".ReactCrop__crop-mask")?.setAttribute("height", "100%")

I'm curious if there is a better way around this. I am unable to consistently reproduce this issue.

Adding some context to this - setting the crop onImageLoad didn't work for me. The crop dimensions will be correctly set, but the mask itself will be broken.

If you inspect the DOM when this happens, it seems like the of the mask SVG has 0x0 dimensions. I was able to force refresh it on load by doing document.querySelector(".ReactCrop__crop-mask")?.setAttribute("height", "100%")

I'm curious if there is a better way around this. I am unable to consistently reproduce this issue.

Is this in a modal as well? Does your modal have some opening animation that changes the height?

Yes its in a modal, but I am rendering it with React.createPortal.
No animation.

In my case, the issue was resolved when I didn't provide initial values in the crop's useState.

const [crop, setCrop] = useState();

THANK YOU!!!

Both proposed solution found here worked for me

document.querySelector(".ReactCrop__crop-mask")?.setAttribute("height", "100%")
Remove default crop value const [crop, setCrop] = useState();

I ended up using option 2. FYI, if you need to specify a crop do it on imageLoad with setCrop({ ... }) That's how I'm doing it and I fixed the issue I was having. \o/

Navigation Menu

Repository navigation

Mask is does'nt showing the first time #579

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Mask is does'nt showing the first time #579

Description

Activity

Djibdjib commented on Feb 6, 2024

immanu10 commented on Feb 6, 2024

Djibdjib commented on Feb 6, 2024

yuhao-wong commented on Feb 14, 2024

dominictobias commented on Feb 15, 2024

yuhao-wong commented on Feb 15, 2024

hanurii commented on Aug 30, 2024

ak-pdeshaies commented on Sep 4, 2024

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions