ImageSpotlight

The ImageSpotlight component is designed to showcase images in a lightbox style with optional captions. It emphasizes the visual content by providing a zoomed-in view on click, making it ideal for galleries, product showcases, or any context where image details are crucial.

Usage

ImageSpotlight Component Usage

import React from 'react';
import ImageSpotlight from '~/ui/components/LightboxImage';

export default function App() {
  return (
    <ImageSpotlight
      src="path/to/image.jpg"
      alt="Descriptive Alt Text"
      caption="This is an optional caption for the image."
    />
  );
}

Rendered Example

An an image of the beautiful Hunza Valley

Props

Name	Type	Default	Description
alt	string	Required	Alternative text for the image, essential for accessibility.
src	string	Required	The source URL of the image to display.
caption	string	`undefined`	Optional text displayed beneath the image as a caption.
style	CSSProperties	`undefined`	Inline styles to apply to the image.
containerClassName	string	`undefined`	Additional CSS classes for the container element.