react-image-gallery

react-image-gallery is a popular and highly customizable React component designed to create beautiful and responsive image and video galleries. It provides a rich set of features out-of-the-box, making it suitable for a wide range of applications that need to display media content in an interactive way.

Key Features:

* Responsive Design: Adapts well to different screen sizes, ensuring a good user experience on desktop, tablet, and mobile devices.
* Thumbnails: Displays a row of clickable thumbnails for easy navigation between media items.
* Full Screen Mode: Allows users to view images/videos in a full-screen, immersive mode.
* Video Support: Beyond images, it also supports displaying videos, often leveraging embedded players like YouTube or Vimeo, or custom video elements.
* Customizable: Offers extensive props and render functions to customize the appearance and behavior of various elements, including controls, captions, and thumbnails.
* Lazy Loading: Improves performance by loading images only when they are about to be displayed.
* Keyboard Navigation: Supports navigating through the gallery using keyboard arrows.
* Autoplay: Can be configured to automatically cycle through media items.
* Infinite Scroll: Provides a seamless experience by looping back to the first item after the last one.
* Custom Controls: Developers can replace or extend default navigation buttons and other controls.
* Accessibility: Built with accessibility in mind, often including ARIA attributes and keyboard navigation.

Installation:

To install `react-image-gallery`, you typically use npm or yarn:

```bash
npm install react-image-gallery
# OR
yarn add react-image-gallery
```

You'll also need to import the component's default CSS for basic styling:

```javascript
import 'react-image-gallery/styles/css/image-gallery.css';
```

Usage:

The component expects an array of `items` as a prop, where each item is an object describing an image or video. Each item object typically includes `original` (URL of the main image), `thumbnail` (URL of the thumbnail image), and optional properties like `description`, `originalAlt`, `thumbnailAlt`, `renderItem` for custom content, and `isVideo` for video items.

`react-image-gallery` simplifies the process of creating professional-looking media galleries in React applications, saving development time while offering high flexibility and a good user experience.

Example Code

import React from 'react';
import ImageGallery from 'react-image-gallery';
import 'react-image-gallery/styles/css/image-gallery.css';

function MyGallery() {
  const images = [
    {
      original: 'https://picsum.photos/id/1018/1000/600/',
      thumbnail: 'https://picsum.photos/id/1018/250/150/',
      description: 'Golden Gate Bridge, San Francisco',
      originalAlt: 'Golden Gate Bridge',
      thumbnailAlt: 'Golden Gate Bridge thumbnail',
    },
    {
      original: 'https://picsum.photos/id/1015/1000/600/',
      thumbnail: 'https://picsum.photos/id/1015/250/150/',
      description: 'A beautiful mountain landscape',
      originalAlt: 'Mountain Landscape',
      thumbnailAlt: 'Mountain Landscape thumbnail',
    },
    {
      original: 'https://picsum.photos/id/1016/1000/600/',
      thumbnail: 'https://picsum.photos/id/1016/250/150/',
      description: 'A serene lake surrounded by trees',
      originalAlt: 'Serene Lake',
      thumbnailAlt: 'Serene Lake thumbnail',
    },
    {
      original: 'https://www.youtube.com/embed/dQw4w9WgXcQ?autoplay=0&showinfo=0&controls=0', // Example YouTube video URL
      thumbnail: 'https://picsum.photos/id/1019/250/150/', // A placeholder thumbnail for the video
      description: 'Never Gonna Give You Up - Rick Astley',
      renderItem: (item) => {
        return (
          <div className="image-gallery-image">
            <iframe
              title={item.description}
              width="100%"
              height="auto"
              src={item.original}
              frameBorder="0"
              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
              allowFullScreen
            >
            </iframe>
            {item.description && (
              <span className="image-gallery-description">
                {item.description}
              </span>
            )}
          </div>
        );
      },
    },
  ];

  return (
    <div style={{ maxWidth: '800px', margin: '20px auto' }}>
      <h1>My Awesome Image & Video Gallery</h1>
      <ImageGallery 
        items={images}
        showPlayButton={true}
        showFullscreenButton={true}
        showThumbnails={true}
        autoPlay={false}
        slideInterval={3000}
        slideDuration={450}
        infinite={true}
        thumbnailPosition="bottom"
        lazyLoad={true}
        // More props can be added here, e.g., showNav, showBullets, etc.
      />
    </div>
  );
}

export default MyGallery;

/*
To run this example:
1. Make sure you have a React project set up (e.g., created with Create React App).
2. Install the library: `npm install react-image-gallery` or `yarn add react-image-gallery`
3. Replace the content of `App.js` (or any other component file) with the code above.
4. Ensure `App.js` imports and renders `MyGallery`.
5. Run your React app: `npm start` or `yarn start`
*/

Example Code

Related Topics