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

Property	Type	Required	Description
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)