npmpackage.info

Gathering detailed insights and metrics for react-preview-gallery

Other packages similar to react-preview-gallery

react-photo-view

1.2.7

An exquisite React photo preview component

react-native-gallery-preview

1.3.4

react-photo-view-kcsx

1.2.13

An exquisite React photo preview component

react-image-previewer

1.1.6

An exquisite React photo preview component

Gathering detailed insights and metrics for react-preview-gallery

react-preview-gallery - 0.0.2 | npmpackage.info

react-preview-gallery

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

0.0.2

MIT

JavaScript

11.44 kB

Installations

npm install react-preview-gallery

Developer Guide

BETA

Typescript

No

Module System

CommonJS, ESM

Node Version

22.14.0

NPM Version

10.9.2 Pull Requests

Open

0

Total

0

Closed

0

Issues

Open

0

Total

0

Closed

0

Releases

Unable to fetch releases

Languages

JavaScript

CSS

HTML

JavaScript (81.54%)

CSS (14.79%)

HTML (3.67%)

Developer

brainhubinc

Download Statistics

Total Downloads

Last Day

Last Week

Last Month

Last Year

GitHub Statistics

MIT License

2 Stars

16 Commits

1 Branches

2 Contributors

Updated on Jun 30, 2025

Maintainers

View All 2 Contributors

Package Meta Information

Latest Version

0.0.2

Package Id

react-preview-gallery@0.0.2

Unpacked Size

11.44 kB

Size

4.48 kB

File Count

NPM Version

10.9.2

Node Version

22.14.0

Published on

Jun 24, 2025

Total Downloads

Cumulative downloads

Total Downloads

NaN

Last Day

NaN

Compared to previous day

Last Week

NaN

Compared to previous week

Last Month

NaN

Compared to previous month

Last Year

NaN

Compared to previous year

Weekly Downloads

Monthly Downloads

Yearly Downloads

Peer Dependencies

react react-dom

Dev Dependencies

@vitejs/plugin-react react react-dom vite

🖼️ 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 📄

No vulnerabilities found.

No security vulnerabilities found.