react-product-video-showcase

A responsive, video product grid with smooth sliding, modal preview for Youtube and Facebook videos. Built for showcasing video based products with beautiful slide animations. Perfect for e-commerce, SaaS, landing pages, or product video showcase sections.

Features

• For Youtube and Facebook videos
• Smart layout based on row × column
• Fully responsive (mobile, tablet, desktop)
• Slide on/off with forward / backward direction
• Expand selected product as modal with previous and next button to change card vertical or horizontal
• Built-in iframe-based video support
• Written in TypeScript and Tailwind
• Supports react >=17

Installation

npm i react-product-video-showcase

or

yarn add react-product-video-slider

Usage

import { ProductGrid } from "react-product-video-showcase";"

Props

| Prop | Type | Description | | ------------------ | ------------------------------------------- | -------------------------------------------------------- | | products | Product[] | Array of product data (must contain videoUrl and id) | | layout | { desktop, tablet, mobile } | Responsive layout: column & row per device | | maxItems | number | Max products to show | | videoConfig | Partial<VideoConfig> | Video options (autoplay, mute, loop, etc.) | | contents | (product) => ReactNode | Custom content section inside card | | buttons | (product) => ReactNode | Custom action buttons | | slide | boolean | Enable/disable auto-sliding | | slideInterval | number | Time between slides (in ms) | | sliderDirection | "forward" | "backward" | Slide direction | | modalCardSlide | "vertical" | "horizontal" | Modal animation direction | | sectionHeader | ({ handleNext, handlePrev }) => ReactNode | Optional header for title or next/prev buttons for slide | | expandCard | ({ handleNext, handlePrev }) => ReactNode | On button click expand the card as modal | | overlayExpandCard| ({ handleNext, handlePrev }) => ReactNode | On card click expand the card as modal |

Layout Shape

| Property | Type | | --------- | --------------------------------- | | desktop | { column: number; row: number } | | tablet | { column: number; row: number } | | mobile | { column: number; row: number } |

VideoConfig Shape

| Property | Type | Description | | -------------------------- | ----------------------------------------- | ------------------------------------------------------- | | autoplay | boolean | Autoplay the video when loaded (YouTube) | | mute | boolean | Mute the video (YouTube) | | controls | boolean | Show or hide player controls (YouTube) | | modestbranding | boolean | Minimizes YouTube logo in control bar (YouTube) | | rel | boolean | Disable related videos at the end (YouTube) | | loop | boolean | Loop the video (YouTube; requires playlist to work) | | playlist | boolean | Indicates use of playlist for looping (YouTube) | | cc_load_policy | boolean | Show closed captions by default (YouTube) | | disablekb | boolean | Disable keyboard controls (YouTube) | | data-autoplay | boolean | Autoplay the video (Facebook) | | data-show-text | boolean | Show or hide post text/title (Facebook) | | data-allowfullscreen | boolean | Allow fullscreen mode (Facebook) | | data-show-captions | boolean | Show captions if available (Facebook) | | data-allow-script-access | "always" | "sameDomain" | "never" | Control script access in iframe (Advanced; Facebook) |

Product Shape

| Property | Type | | ---------------- | -------- | | id | string | | slug? | string | | title | string | | price | number | | discountPrice? | number | | category? | string | | videoUrl | string | | currency? | string |

Live Demo

View Demo

NPM Package

react-product-video-showcase

Author

Riajul Islam
GitHub
LinkedIn

License

MIT © Riajul Islam