react-lightgalleryreact-lightgallery is a React component wrapper for the popular LightGallery.js library. LightGallery is a highly customizable, responsive, and touch-enabled JavaScript gallery plugin that allows you to create beautiful image and video galleries with a wide range of features.
Key Features and Capabilities:
1. React Integration: It provides a seamless way to incorporate LightGallery into your React applications, following React's component-based architecture.
2. Responsive Design: Galleries adapt gracefully to different screen sizes, from mobile devices to large desktop monitors.
3. Touch Support: Offers intuitive swipe gestures for navigating through images on touch-enabled devices.
4. Extensive Customization: Comes with numerous options to control the appearance, animations, and behavior of the gallery, including custom themes, transition effects, and controls (e.g., thumbnails, zoom, full screen, slideshow).
5. Lazy Loading: Improves performance by loading images only when they are about to be viewed, which is particularly useful for galleries with a large number of items.
6. Video Support: Supports displaying videos from popular platforms like YouTube and Vimeo, as well as self-hosted MP4 videos.
7. Plugin Architecture: LightGallery is modular, allowing you to include only the features you need via its plugin system (e.g., zoom, thumbnail, full screen, video, share).
8. Dynamic Content: Easily add or remove gallery items dynamically within your React component.
Installation:
To use `react-lightgallery`, you need to install both `react-lightgallery` and `lightgallery` itself, along with its base CSS and any plugin-specific CSS:
```bash
npm install react-lightgallery lightgallery
# or
yarn add react-lightgallery lightgallery
```
And import the necessary CSS files in your component or main CSS file:
```javascript
import 'lightgallery/css/lightgallery.css';
import 'lightgallery/css/lg-zoom.css'; // Optional: for zoom plugin
import 'lightgallery/css/lg-thumbnail.css'; // Optional: for thumbnail plugin
// ... other plugin CSS as needed
```
Usage:
`react-lightgallery` typically uses two main components: `<LightgalleryProvider>` and `<LightgalleryItem>`.
* `<LightgalleryProvider>`: This component acts as a context provider, managing the LightGallery instance and its global options. It wraps the elements that will trigger the gallery.
* `<LightgalleryItem>`: This component wraps individual elements (e.g., `<img>` tags, `<a>` tags) that, when clicked, will open the LightGallery viewer. Each `LightgalleryItem` needs `src` and `thumb` props, and often a `group` prop to link multiple items into a single gallery experience.
Benefits:
`react-lightgallery` simplifies the process of integrating a powerful, feature-rich image and video gallery into React applications. It abstracts away the direct DOM manipulation required by the vanilla JavaScript library, allowing developers to manage galleries using React's declarative syntax and state management.
Example Code
import React from 'react';
import { LightgalleryProvider, LightgalleryItem } from 'react-lightgallery';
// Import base LightGallery CSS
import 'lightgallery/css/lightgallery.css';
// Optional: Import CSS for specific plugins if you plan to use them
import 'lightgallery/css/lg-zoom.css';
import 'lightgallery/css/lg-thumbnail.css';
// Optional: Import LightGallery plugins. These need to be passed to the plugins array.
// import lgZoom from 'lightgallery/plugins/zoom';
// import lgThumbnail from 'lightgallery/plugins/thumbnail';
const images = [
{
id: '1',
src: 'https://images.unsplash.com/photo-1550998993-9c8e1a1b1a1b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80',
thumb: 'https://images.unsplash.com/photo-1550998993-9c8e1a1b1a1b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80',
alt: 'Beautiful Ocean View'
},
{
id: '2',
src: 'https://images.unsplash.com/photo-1549887754-080c3e9e3e3b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80',
thumb: 'https://images.unsplash.com/photo-1549887754-080c3e9e3e3b?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80',
alt: 'Serene Forest Path'
},
{
id: '3',
src: 'https://images.unsplash.com/photo-1506748687214-eb17b4ae151f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1200&q=80',
thumb: 'https://images.unsplash.com/photo-1506748687214-eb17b4ae151f?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=300&q=80',
alt: 'Majestic Mountain Sunset'
}
];
const LightgalleryExample = () => {
// LightGallery options can be passed directly to LightgalleryProvider
const lightgalleryOptions = {
speed: 500,
loop: true,
download: false,
// To enable plugins, import them and add to the plugins array:
// plugins: [lgZoom, lgThumbnail],
thumbnail: true, // Example option to show thumbnails
zoom: true, // Example option to enable zoom functionality
};
return (
<div className="gallery-container" style={{ padding: '20px', maxWidth: '960px', margin: '0 auto' }}>
<h1>My React Image Gallery</h1>
<p>Click on any image to open the LightGallery viewer.</p>
<LightgalleryProvider
{...lightgalleryOptions} // Spread your options here
// You can also add event handlers as props to the provider
onInit={() => console.log('LightGallery instance initialized')}
onAfterOpen={() => console.log('LightGallery opened')}
onCloseAfter={() => console.log('LightGallery closed')}
>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '15px', justifyContent: 'center' }}>
{images.map((image) => (
<LightgalleryItem
key={image.id} // Important for React list rendering
src={image.src} // Full-size image source
thumb={image.thumb} // Thumbnail image source
group="my-nature-gallery" // Group items together to form a single gallery
data-sub-html={`<h4>${image.alt}</h4><p>A beautiful scene</p>`} // Optional: HTML content for caption
>
<img
src={image.thumb}
alt={image.alt}
style={{
width: '200px',
height: '150px',
objectFit: 'cover',
cursor: 'pointer',
borderRadius: '8px',
boxShadow: '0 4px 8px rgba(0,0,0,0.1)'
}}
/>
</LightgalleryItem>
))}
</div>
</LightgalleryProvider>
</div>
);
};
export default LightgalleryExample;