diff --git a/src/hooks/useAbstractCropper.ts b/src/hooks/useAbstractCropper.ts index 8eaf69ef..de825e8d 100644 --- a/src/hooks/useAbstractCropper.ts +++ b/src/hooks/useAbstractCropper.ts @@ -25,6 +25,7 @@ export interface AbstractCropperHookProps) => void; onError?: (cropper: AbstractCropperRef) => void; + onUpdate?: (cropper: AbstractCropperRef) => void; unloadTime?: number; autoReconcileState?: boolean; settings?: CropperInstanceSettingsProp; @@ -65,11 +66,6 @@ export function useAbstractCropper( checkOrientation, unloadTime, canvas, - onLoad() { - if (cropperRef.current) { - onReady?.(cropperRef.current); - } - }, onError() { if (cropperRef.current) { onError?.(cropperRef.current); @@ -179,6 +175,12 @@ export function useAbstractCropper( resetCropper(); }, [cropperImage.getImage()]); + useUpdateEffect(() => { + if (cropperRef.current && currentImage) { + onReady?.(cropperRef.current); + } + }, [currentImage]) + useUpdateEffect(() => { if (cropperRef.current) { onUpdate?.(cropperRef.current); diff --git a/src/hooks/useCropperImage.ts b/src/hooks/useCropperImage.ts index 198f68b4..95d94239 100644 --- a/src/hooks/useCropperImage.ts +++ b/src/hooks/useCropperImage.ts @@ -1,5 +1,6 @@ import { useEffect, useRef, useState } from 'react'; import { CropperImage, isUndefined, promiseTimeout, loadImage } from 'advanced-cropper'; +import { useStateWithCallback } from "./useStateWithCallback"; export interface CropperImageHookSettings { src?: string | null; @@ -15,9 +16,9 @@ export interface CropperImageHookSettings { export function useCropperImage(options: CropperImageHookSettings) { const { src, onLoadingStart, onLoadingEnd, onError, onLoad, crossOrigin, checkOrientation, canvas, unloadTime } = options; - const [loading, setLoading] = useState(false); - const [loaded, setLoaded] = useState(false); const [image, setImage] = useState(null); + const [loading, setLoading] = useState(false); + const [loaded, setLoaded] = useStateWithCallback(false); const currentSrc = useRef(null); @@ -43,7 +44,6 @@ export function useCropperImage(options: CropperImageHookSettings) { const [image] = responses as [CropperImage]; if (currentSrc.current === src) { setImage(image); - onLoad?.(image); } }) .catch(() => { @@ -73,7 +73,9 @@ export function useCropperImage(options: CropperImageHookSettings) { useEffect(() => { if (image) { - setLoaded(true) + setLoaded(true, () => { + onLoad?.(image); + }) } }, [image])