> For the complete documentation index, see [llms.txt](https://cody-burleson.gitbook.io/rock-mountain/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://cody-burleson.gitbook.io/rock-mountain/developer-guide/react-components/toggle-lazy-load-image-component.md).

# 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](https://github.com/Aljullu/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) |