In my custom gallery component, the crucial code section looks like this:
<Gallery>
<Header>
<img src={galleryIcon} alt='Galley icon' />
<h1>My Gallery</h1>
</Header>
<Images isImage={custom.length > 0}>
{custom.length > 0 &&
custom.map((c, i) => (
<img
id={`custom${i}`}
key={`custom${i}`}
src={c.img}
alt='brick'
onClick={() => (setEdit((prev) => !prev), setActual(c))}
/>
))}
<div className='add'>
<button onClick={() => setGallery((prev) => !prev)}>
<img src={add} alt='Add icon' />
</button>
<p>Click to add a brick from our collections!</p>
</div>
</Images>
</Gallery>
Each image in the gallery follows this styling:
img {
box-sizing: border-box;
height: 28vh;
width: 28vh;
margin-right: 1.5rem;
cursor: pointer;
}
Furthermore, whenever a user inputs a new image, I implement a resizing mechanism that maintains scale integrity using this function:
export function resizeImage(
file: File | Blob,
maxWidth: number,
maxHeight: number,
scale = 1
): Promise<Blob> {
// Function details...
}Lastly, the Resize component enables users to adjust images with a pinch and zoom feature as part of DOM manipulation:
const Resize: React.FC<Props> = ({ actual, setResize, setCustom, custom }) => {
// Component details...
};
I am also utilizing the react-zoom-pan-pinch library for enabling zoom functionalities. My concern revolves around dynamically resizing images on the DOM based on zoom scaling triggered by TransformWrapper component's onZoomChange function. Is there a cleaner approach to achieve image resizing in accordance with zoom scale adjustments?
A minimalistic repository will be shared soon, but in the meantime, you can access the complete repo here: https://github.com/Mdsp9070/brickart/tree/dev