🖼️ react-preview-gallery

A responsive and touch-friendly gallery component for React with image/video support and interactive navigation.

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 📦

1npm install react-preview-gallery
2# or
3yarn add react-preview-gallery

Quick start 🚀

🖼️ Only images

1import Gallery from "react-preview-gallery";
2import "react-preview-gallery/style.css";
3
4const images = [
5  { src: "image1.jpg", alt: "Description 1" },
6  { src: "image2.jpg", alt: "Description 2" },
7];
8
9function App() {
10  return (
11    <Gallery 
12      imagesArr={images}
13      description="product name"
14    />
15  );
16}

🎥 With video

1<Gallery
2  imagesArr={images}
3  isShowVideo={true}
4  videoFile="video.mp4"
5/>

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]