Exploring the capabilities of the react-image-mapper library, I stumbled upon an interesting feature: the ImageMapper component offers a prop called width, representing the image width in pixels. Integrating this component into my application based on the react-bootstrap layout, I organized it into three columns where the third column showcases the ImageMapper:
return (
<>
<Row>
<Col md={5} />
<Col md={2} />
<Col md={5}>
<div
style={{
display: "flex",
justifyContent: "center",
}}
>
<ImageMapper
id="football-field"
src={footballField}
alt="football-field"
width={resizeWidth()}
map={MAP}
/>
</div>
</Row>
</>);
Now, faced with the task of defining the resizeWidth function to determine the column width in pixels, I find myself pondering over potential solutions. Are there any insights or recommendations on how to achieve this effectively?