Custom Image Component
Substitute in a React component that would get passed imageProps (the props that would have been passed to the <img> tag) and item (the original item in images) to be used to render thumbnails; useful for lazy loading.
import { ThumbnailImageProps } from "react-grid-gallery";
const ImageComponent = (props: ThumbnailImageProps) => {
const [show, setShow] = useState(false);
if (show) {
return <img {...props.imageProps} />;
}
return (
<div style={{ ...props.imageProps.style, textAlign: "center" }} onMouseOver={() => setShow(true)}>
Hover to show
</div>
);
};<Gallery
images={images}
thumbnailImageComponent={ImageComponent}
/>Live Demo
Source Code
react-grid-gallery/examples/custom-image-component (opens in a new tab)
