React image gallery
Use lightGallery React component to build beautiful image gallery lightBox. lightGallery react component support all the feature of lightGallery such as pinch to zoom, rotate, flip images, social sharing, animated thumbnails, etc.
Demo
React
import { FC, useCallback, useEffect, useRef, useState } from 'react';
import LightGallery from 'lightgallery/react';
import lgZoom from 'lightgallery/plugins/zoom';
import lgThumbnail from 'lightgallery/plugins/thumbnail';
import { LightGallery as ILightGallery } from 'lightgallery/lightgallery';
import './style.scss';
export const App = () => {
const dynamicEl = [
{
src: '...',
responsive: '...',
thumb: '...',
subHtml: `...`,
},
{
src: '...',
responsive: '...',
subHtml: `...`,
},
// Add more placeholder images as needed
];
return (
<>
<LightGallery
dynamic={true}
dynamicEl={dynamicEl}
/>
</>
);
};