Description
Is your feature request related to a problem? Please describe.
Use case: display a grid of preview images. To avoid image distortion and support various screen sizes and layouts, one can use images that have larger natural size than the possible preview sizes. These natural images should be centered, however - otherwise, you inadvertently crop the image to its top-left region, which is undesirable (top):
Describe the solution you'd like
A common trick is to apply a style to the image like this (potentially in the X-direction, too):
position: "relative",
top: "50%",
transform: "translateY(-50%)"
...
However, this should only be applied to the node. I propose to introduce
loadedImageProps
which are then spread to the image in getImg
:
// ...
return <img onLoad={this.onImageLoad()} {...imgProps} {...loadedImageProps} />;
which can be used like
<LazyLoadImage
loadedImageProps={{ className: classes.imagePositionHack }}
// ...
/>
Describe alternatives you've considered
Applying the style directly to the LazyLoad component doesn't work, because the relative transform meddles with the visibility detection. A simple className
for the img component could be an option, similar to material-ui allows styling of children, e.g. <LazyLoad classes={{ img: myImgClassName }} ... />
.
I can send a pull request in the day.
Activity
Aljullu commentedon Mar 17, 2019
@cmenge thanks for opening an issue. Did you have time to prepare a PR? I was playing with this idea in a branch named
loaded-image-props
, but I'm not sure this prop will handle all usecases anyway, so I'm a bit reluctant to merge it.If I understood your problem correctly, you could create a wrapper component and use
beforeLoad
andafterLoad
events to change theclassName
orstyle
, right? Something like this:Do you think that would solve your problem?