How to programatically center an image?

[ironexdev]

I want to programatically center an image, when user clicks a button (one for horizontal centering and one for vertical centering)

I use the setCrop event, which receives x and y coordinates as arguments. The problem is that in this case, the onCropComplete event doesn't get triggered because it's not a direct user interaction with the Cropper.

setCrop((prev) => {
  return { ...prev, x: 0 }
})

setCrop((prev) => {
  return { ...prev, y: 0 }
})

That leads to croppedAreaPixels not being set, which later causes issue with previewing the image.

Is there any way to handle this?

(replication https://github.com/ironexdev/rec-question/tree/master)

[ValentinH]

The easiest way is to trigger a full remount of the Cropper by setting a different "key" prop right after you change the crop property.

[ironexdev]

Thank you, but that leads to flickering in some cases. It looks like the better solution is to use onCropAreaChange event.

const centerFired = useRef(false);
const handleCenterX = () => {
  centerFired.current = true
  setCrop((prev) => ({ ...prev, x: 0 }));
};

<Cropper
  onCropAreaChange={(_, croppedAreaPixels) => {
  if(centerFired.current){
    setCroppedAreaPixels(croppedAreaPixels)
    centerFired.current = false
  }
}}
/>

// Edit changed centerFired from useState to useRef (no need to trigger re-render)