Toggle Lazy Load Image Component
The ToggleLazyLoadImage component provides the ability to toggle between two images on a click. This component depends on the React Lazy Load Image component. We are using this instead of the Next.js Image component because, for now anyway, it supports a fluid image that fills the photo grid we use showing photo albums/collections. We could not get the Next.js Image component to act fluid and properly fill its card on the photo grid.
Image 1 is clicked...
...to reveal Image 2
Setup and Usage
Import the component as follows:
import ToggleLazyLoadImage from 'components/ToggleLazyLoadImage'
Within your JSX use the tage as shown:
<ToggleLazyLoadImage image1={img1} image2={img2} cname="card-img-top"/>
Attributes
image1
string
yes
URL for the default (initial) image to be shown
image2
string
yes
URL for the next image to be shown (in the toggled state)
Last updated