16 Free React Gallery, Lightbox, and Photo Viewer Libraries

16 Free React Gallery, Lightbox, and Photo Viewer Libraries

In the ever-evolving world of web development, open-source libraries offer a plethora of opportunities for innovation and efficiency. This guide will take you through some of the finest open-source React libraries for galleries, lightboxes, and photo viewers, providing an invaluable resource for your next project.

These libraries can be used with React-based frameworks such as Next.js or used with the amazing Astro framework.

But before you head into our list, we recommend checking our other related lists that can benefit you as a React developer.

18 Free WYSIWYG and Markdown Editor Libraries for React Developers, Enrich Your Text Editing
A WYSIWYG (What You See Is What You Get) and Markdown Editor are two types of text editors that are widely used in content creation and web development. A WYSIWYG Editor allows users to see what the end result will look like while the document is being created. In other
17 Free Self-hosted Photo Gallery Solutions for Photographers, and Designers in 2024
Welcome to our comprehensive guide on the top 17 free self-hosted photo gallery solutions for photographers and designers in 2024. What is a self-hosted gallery app? A self-hosted gallery solution is a type of software that allows you to create, manage, and display a digital photo gallery on your own
13 Open-source Free React UI Builder for Building Rich Interfaces
What is a React UI Builder A React UI Builder is a tool that allows developers to create user interfaces with React, a popular JavaScript library, in a more visual and intuitive way. These UI builders often provide a drag-and-drop interface, making it easy to design interfaces without writing a
16 Free React Map Libraries for Google Maps, Leaflet, and SVG Maps
Welcome to your comprehensive guide for the best free React.js Map Libraries. This guide is designed to delve into an impressive range of 16 top-tier libraries. Each one has been carefully selected for its ability to enhance your React.js applications with interactive and customizable map features. Our coverage
31 Free React Data Visualization and Chart Libraries
As a React developer, there’s a high probability that you’ve encountered scenarios where you needed to incorporate some form of visualization into your applications. This could be anything from simple graphs to complex interactive visuals. The question then arises - which library should you choose for this task? In this

1. React lightbox component

This is an open-source free React library component that enables developers to add a reactive multi-feature Lightbox effect to any React app.

Its current features include zoom, rotation, smooth animation and customizable thumbnails.

The library is an open-source project that is released under the MIT License .

Install

npm install react-lightbox-component

Basic Usage

import Lightbox from 'react-lightbox-component';

const App = () => (
  <div>
    <Lightbox images={
      [
        {
          src: 'some image url',
          title: 'image title',
          description: 'image description'
        }
      ]
    }/>
  </div>
);

2. React Spring Lightbox

React-spring-lightbox is a flexible image gallery lightbox with native-feeling touch gestures and smooth animations.

It replicates the input UX of hardware-accelerated native image applications, supporting gestures and features such as mousewheel, swipe, click+drag, keyboard controls, zooming, panning on zoomed-in images, and spring-based animations. It allows for the implementation of your own UI and requires no external CSS.

It is smooth, lightweight, and comes with highly customizable options.

react-spring-lightbox - Docs
react-spring-particles is a modal photo gallery that aims to replicate all of the input UX of hardware-accelerated native image applications from touch swiping to Ctrl + Mousewheel zooming.

3. Yet Another React Lightbox

The React Lightbox component is modern, performant, easy to use, customizable, and extendable. It supports React 18, 17, and 16.8.0+, and offers UX support for keyboard, mouse, touchpad, and touchscreen navigation.

It preloads a limited number of images without compromising performance or UX, and never displays partially downloaded images.

You can check the examples here.

Install

npm install yet-another-react-lightbox

Setup

import * as React from "react";
import Lightbox from "yet-another-react-lightbox";
import "yet-another-react-lightbox/styles.css";

export default function App() {
  const [open, setOpen] = React.useState(false);

  return (
    <>
      <button type="button" onClick={() => setOpen(true)}>
        Open Lightbox
      </button>

      <Lightbox
        open={open}
        close={() => setOpen(false)}
        slides={[
          { src: "/image1.jpg" },
          { src: "/image2.jpg" },
          { src: "/image3.jpg" },
        ]}
      />
    </>
  );
}
GitHub - igordanchenko/yet-another-react-lightbox: Modern React lightbox component
Modern React lightbox component. Contribute to igordanchenko/yet-another-react-lightbox development by creating an account on GitHub.

4. React LightBox Pack

The React LightBox Pack is a lightweight NPM package built from scratch, specifically for React, with no additional dependencies required. It is customizable and now features added type safety in version 0.2.0.

Install

npm install react-lightbox-pack or npm i react-lightbox-pack

GitHub - imshines/react-lightbox-pack: A minimal lightbox package for react ⚛
A minimal lightbox package for react ⚛. Contribute to imshines/react-lightbox-pack development by creating an account on GitHub.

5. Lightbox-like Image viewer for React

The "Lightbox-like Image viewer for React" is a powerful library that offers a comprehensive and interactive viewing experience. It supports functions such as zoom, rotate, and move, applicable to a single or multiple images. It comes with basic touch support and is capable of responsive design, making it adaptable to various device screens.

Additionally, it supports a full 360-degree rotation, providing a rich user experience. It also includes touch and full keyboard support, demonstrating its versatility across different user interactions.

Install

yarn add react-awesome-lightbox

Setup

import Lightbox from "react-awesome-lightbox";
// You need to import the CSS only once
import "react-awesome-lightbox/build/style.css";

Use

<Lightbox image="image_url" title="Image Title">
GitHub - theanam/react-awesome-lightbox: Lightbox for react with zoom, rotate and move feature with touch support 💡📦
Lightbox for react with zoom, rotate and move feature with touch support 💡📦 - theanam/react-awesome-lightbox

6. React Image Lightbox

React Image Lightbox is a flexible component for displaying images in a React project. It features keyboard shortcuts, image zoom, flexible rendering, image preloading, and mobile-friendly capabilities.

Install

npm install react-image-lightbox

Usage

import React, { Component } from 'react';
import Lightbox from 'react-image-lightbox';
import 'react-image-lightbox/style.css'; // This only needs to be imported once in your app

const images = [
  '//placekitten.com/1500/500',
  '//placekitten.com/4000/3000',
  '//placekitten.com/800/1200',
  '//placekitten.com/1500/1500',
];

export default class LightboxExample extends Component {
  constructor(props) {
    super(props);

    this.state = {
      photoIndex: 0,
      isOpen: false,
    };
  }

  render() {
    const { photoIndex, isOpen } = this.state;

    return (
      <div>
        <button type="button" onClick={() => this.setState({ isOpen: true })}>
          Open Lightbox
        </button>

        {isOpen && (
          <Lightbox
            mainSrc={images[photoIndex]}
            nextSrc={images[(photoIndex + 1) % images.length]}
            prevSrc={images[(photoIndex + images.length - 1) % images.length]}
            onCloseRequest={() => this.setState({ isOpen: false })}
            onMovePrevRequest={() =>
              this.setState({
                photoIndex: (photoIndex + images.length - 1) % images.length,
              })
            }
            onMoveNextRequest={() =>
              this.setState({
                photoIndex: (photoIndex + 1) % images.length,
              })
            }
          />
        )}
      </div>
    );
  }
}
GitHub - frontend-collective/react-image-lightbox: React lightbox component
React lightbox component. Contribute to frontend-collective/react-image-lightbox development by creating an account on GitHub.

7. Simple-React-Lightbox (SRL)

Simple React Lightbox (SRL) is a tool that allows for the addition of a light-box functionality to a set of images, regardless of whether they are predefined or sourced externally. It was created to address the need for a light-box solution for content that is not known beforehand.

From version 1.3, a gallery with links and images as thumbnails can be created, offering full control for custom galleries.

Install

npm install --save simple-react-lightbox

yarn add simple-react-lightbox

Usage

import React from "react";
import MyComponent from "./components/MyComponent";
import SimpleReactLightbox from "simple-react-lightbox"; // Import Simple React Lightbox

function App() {
  return (
    <div className="App">
      <SimpleReactLightbox>
        <MyComponent /> // Your App logic
      </SimpleReactLightbox>
    </div>
  );
}

export default App;
GitHub - erkindunya/simple-react-lightbox: A simple but functional light-box for React.
A simple but functional light-box for React. Contribute to erkindunya/simple-react-lightbox development by creating an account on GitHub.

The Photo Gallery is a simple, full-width photo gallery with features such as full-width photo display, lightbox, directory support, automatic image optimization, generation of loading blurs, and automatic dynamic regeneration. It can handle hundreds or thousands of images, supports almost all image file types, and offers image sorting.

Recent updates include support for specific directory regeneration, Imagor support for all file types, and better control over the generated file types.

You can check the demo here.

GitHub - Inlustra/the-photo-gallery: A simple, featureless (By design) full-width photo gallery.
A simple, featureless (By design) full-width photo gallery. - Inlustra/the-photo-gallery

9. React Image Viewer

This is a simple lightweight React component to display images in a responsive lightbox.

Install

npm install react-image-viewer

Usage

class Demo extends React.Component {
  render() {
    const style = {
      width: 400,
      height: 300,
      backgroundSize: 'cover'
    };
    const config = {
      viewedImageSize: 0.8,
      backgroundOpacity: 0.6
    };
    return (
      <div>
        <ImageViewer
          style={style}
          config={config}
          image="http://***"
        />
      </div>
    );
  }
}
GitHub - hronro/react-image-viewer: a react component
a react component. Contribute to hronro/react-image-viewer development by creating an account on GitHub.

10. React Photo View

The React photo preview component offers features like touch gestures, drag and pan physical effect sliding, two-finger zooming, animation connection, adaptive image rendering, custom previews, keyboard navigation, custom node expansion, and server-side rendering support. It is based on TypeScript, is 7KB Gzipped, and offers a simple and easy-to-use API.

Install

yarn add react-photo-view

Usage

import { PhotoProvider, PhotoView } from 'react-photo-view';
import 'react-photo-view/dist/react-photo-view.css';

function App() {
  return (
    <PhotoProvider>
      <PhotoView src="/1.jpg">
        <img src="/1-thumbnail.jpg" alt="" />
      </PhotoView>
    </PhotoProvider>
  );
}
GitHub - MinJieLiu/react-photo-view: An exquisite React photo preview component.
An exquisite React photo preview component. Contribute to MinJieLiu/react-photo-view development by creating an account on GitHub.

11. React Simple Image Viewer

React Simple Image Viewer is a component for React. It has a simple image viewer functionality and is available on npm.

Install

$ npm install react-simple-image-viewer

$ yarn add react-simple-image-viewer

How to use

import React, { useState, useCallback } from 'react';
import { render } from 'react-dom';
import ImageViewer from 'react-simple-image-viewer';

function App() {
  const [currentImage, setCurrentImage] = useState(0);
  const [isViewerOpen, setIsViewerOpen] = useState(false);
  const images = [
    'http://placeimg.com/1200/800/nature',
    'http://placeimg.com/800/1200/nature',
    'http://placeimg.com/1920/1080/nature',
    'http://placeimg.com/1500/500/nature',
  ];

  const openImageViewer = useCallback((index) => {
    setCurrentImage(index);
    setIsViewerOpen(true);
  }, []);

  const closeImageViewer = () => {
    setCurrentImage(0);
    setIsViewerOpen(false);
  };

  return (
    <div>
      {images.map((src, index) => (
        <img
          src={ src }
          onClick={ () => openImageViewer(index) }
          width="300"
          key={ index }
          style={{ margin: '2px' }}
          alt=""
        />
      ))}

      {isViewerOpen && (
        <ImageViewer
          src={ images }
          currentIndex={ currentImage }
          disableScroll={ false }
          closeOnClickOutside={ true }
          onClose={ closeImageViewer }
        />
      )}
    </div>
  );
}

render(<App />, document.getElementById('app'));
GitHub - specter256/react-simple-image-viewer: Simple image viewer component for React
Simple image viewer component for React. Contribute to specter256/react-simple-image-viewer development by creating an account on GitHub.

12. React Images Viewer

A react library that view photos list easily, and a simple, responsive viewer component for displaying an array of images.

Install

# recommended
yarn add react-images-viewer
# using NPM
npm install react-images-viewer --save

How to use?

import React from "react";
import ImgsViewer from "react-images-viewer";

export default class Demo extends React.Component {
  render() {
    return (
      <ImgsViewer
        imgs={[
          { src: "http://example.com/img1.jpg" },
          { src: "http://example.com/img2.png" },
        ]}
        currImg={this.state.currImg}
        isOpen={this.state.viewerIsOpen}
        onClickPrev={this.gotoPrevious}
        onClickNext={this.gotoNext}
        onClose={this.closeViewer}
      />
    );
  }
}
GitHub - guonanci/react-images-viewer: A react library that view photos list easily, and a simple, responsive viewer component for displaying an array of images.
A react library that view photos list easily, and a simple, responsive viewer component for displaying an array of images. - guonanci/react-images-viewer

13. React Picture Viewer

React-picture-viewer is a dependency-free picture viewer for React, allowing free dragging and zooming of pictures within the viewport, with adjustable min/max zoom size.

GitHub - CRONWMMM/react-picture-viewer: react-picture-viewer is an image viewer component encapsulated with React framework.
react-picture-viewer is an image viewer component encapsulated with React framework. - CRONWMMM/react-picture-viewer

14. React Image Viewer

Yet another free Lightbox and image free component for React.

Install

# ImageViewer requirement
npm install --save react prop-types

npm install --save @mebtte/react-image-viewer

Usage

import React from 'react';

import ImageViewer from '@mebtte/react-image-viewer';

class Demo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      open: false,
      src: 'https://mebtte.com/resource/wallpaper',
    };
  }

  openImageViewer = () => this.setState({ open: true })

  closeImageViewer = () => this.setState({ open: false })

  render() {
    const { open, src } = this.state;
    return (
      <div>
        <button type="button" onClick={this.openImageViewer}>
          open
        </button>
        <ImageViewer
          open={open}
          src={src}
          onClose={this.closeImageViewer}
        />
      </div>
    );
  }
}

export default Demo;
GitHub - mebtte/react-image-viewer: React Component that view a image.
React Component that view a image. Contribute to mebtte/react-image-viewer development by creating an account on GitHub.

15. Awesome Image Viewer

The Awesome Image Viewer is an open-source free image viewer library that is compatible with React, Angular, Vue, and Typescript and offers features such as lazy loading, zoomability, custom buttons, custom select, swipe on touchscreen, cover size, thumbnail support, navigation with arrow keys, responsive design, dynamic HTML, lightweight, and zero dependency.

GitHub - MostafaMDZH/Awesome-Image-Viewer: React, Angular, Vue, and Typescript compatible image viewer.
React, Angular, Vue, and Typescript compatible image viewer. - MostafaMDZH/Awesome-Image-Viewer

16. BaguetteBox.js

This is a simple yet powerful JavaScript library that is built in pure JavaScript and can be easily used with React projects.

GitHub - feimosi/baguetteBox.js: :zap: Simple and easy to use lightbox script written in pure JavaScript
:zap: Simple and easy to use lightbox script written in pure JavaScript - feimosi/baguetteBox.js








Open-source Apps

9,500+

Medical Apps

500+

Lists

450+

Dev. Resources

900+