🖼️ react-preview-gallery

Features ✨

• Multi-format support - Displays both images and videos
• Touch gestures - Swipe navigation for mobile devices
• Hover navigation - Desktop-friendly hover controls
• Lazy loading - Efficient image loading with LazyImage
• Customizable - Control dimensions and styling
• Accessibility - Proper alt texts and semantic markup

Installation 📦

npm install react-preview-gallery
# or
yarn add react-preview-gallery

Quick start 🚀

🖼️ Only images

import Gallery from "react-preview-gallery";
import "react-preview-gallery/style.css";

const images = [
  { src: "image1.jpg", alt: "Description 1" },
  { src: "image2.jpg", alt: "Description 2" },
];

function App() {
  return (
    <Gallery 
      imagesArr={images}
      description="product name"
    />
  );
}

🎥 With video

<Gallery
  imagesArr={images}
  isShowVideo={true}
  videoFile="video.mp4"
/>

Props ⚙️

| Prop | Type | Default | Description | |:-------------------|:--------:|:---------:|:--------------------------------------------| | imagesArr | Array | required | Array of image objects with src and alt | | description | String | "" | Metadata description | | isShowVideo | Boolean | false | Enable video display | | videoFile | String | "" | Video source URL | | dotsClassName | String | "" | Custom class for navigation dots | | sectorsClassName | String | "" | Custom class for hover sectors |

License 📄

MIT © [Kostya Skakodub]