feat: enable portal rendering for ImageCropModal component
This commit is contained in:
@@ -1,4 +1,5 @@
|
|||||||
import { useCallback, useState } from 'react';
|
import { useCallback, useState } from 'react';
|
||||||
|
import { createPortal } from 'react-dom';
|
||||||
import Cropper, { type Area } from 'react-easy-crop';
|
import Cropper, { type Area } from 'react-easy-crop';
|
||||||
import { getCroppedImage } from '../lib/cropImage';
|
import { getCroppedImage } from '../lib/cropImage';
|
||||||
|
|
||||||
@@ -28,7 +29,7 @@ export default function ImageCropModal({ src, fileName, onCancel, onConfirm }: I
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return createPortal(
|
||||||
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" dir="rtl">
|
<div className="fixed inset-0 z-50 flex items-center justify-center bg-black/50 p-4" dir="rtl">
|
||||||
<div className="w-full max-w-md rounded-2xl bg-white dark:bg-gray-900 shadow-2xl overflow-hidden">
|
<div className="w-full max-w-md rounded-2xl bg-white dark:bg-gray-900 shadow-2xl overflow-hidden">
|
||||||
<div className="flex items-center justify-between px-5 py-4 border-b border-slate-100 dark:border-gray-800">
|
<div className="flex items-center justify-between px-5 py-4 border-b border-slate-100 dark:border-gray-800">
|
||||||
@@ -70,6 +71,7 @@ export default function ImageCropModal({ src, fileName, onCancel, onConfirm }: I
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>,
|
||||||
|
document.body,
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user