16 Ways to Gallery React Components for Developers

Explore 16 ways to gallery React components to help developers create beautiful and interactive image galleries for their apps. These methods cover a wide range of use cases, including simple galleries, sortable galleries, and responsive galleries.

1.React AwesomeSlider

React content transition slider. Awesome Slider is a 60fps, light weight, performant component that renders an animated set of production ready UI general purpose sliders
react-awesome-slider is a 60fps, extendable, highly customisable, production ready React Component that renders a media (image/video) gallery slider/carousel.

React AwesomeSlider

View on GitHub

2.React bnb gallery

Simple photo gallery based on React and inspired on Airbnb image gallery .Friendly, customizable and accessible-ready simple photo gallery based on React.

React bnb gallery

Live Demo https://peterpalau.github.io/react-bnb-gallery/

View on GitHub: https://github.com/pedropalau/react-bnb-gallery

3. React Photo Gallery

Responsive, accessible, composable, and customizable image gallery component
Maintains the original aspect ratio of your photos
Creates a masonry or justified grid
Supports row or column direction layout
Provides an image renderer for custom implementation of things like image selection, favorites, captions, etc.
SSR app compatible

React Photo Gallery

View on Github

4.React id swiper

A library to use Swiper as a ReactJs component (Providing lightweight version of Swiper which reduces ~40kb of minified size)

What is Swiper?
Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior. It is intended to be used in mobile websites, mobile web apps, and mobile native/hybrid apps. Designed mostly for iOS, but also works great on latest Android, Windows Phone 8 and modern Desktop browsers

Swiper is not compatible with all platforms, it is a modern touch slider which is focused only on modern apps/platforms to bring the best experience and simplicity.

React id swiper

View on GitHub: https://github.com/kidjp85/react-id-swiper

5.React Grid Gallery

Justified image gallery component for React inspired by Google Photos and based upon React Images.

React Grid Gallery

View on GitHub: https://github.com/benhowell/react-grid-gallery

6.React lightbox component

An image lightbox component for ReactJS.

React lightbox component

Features:

Zoom control
Rotate control
Smooth animations
Customizable thumbnails

View on Github

7.React Carousel Image Gallery

React image gallery is a React component for building image galleries and carousels.

React Carousel Image Gallery

Features of react-image-gallery

Mobile Swipe Gestures
Thumbnail Navigation
Fullscreen Support
Custom Rendered Slides
Responsive Design
Tons of customization options (see props below)
Lightweight ~8kb (gzipped, excluding react)

View on Github

8.Animate Banner React Component.

Animate Banner React Component.

Animate Banner React Component

Example

http://localhost:8012/examples/
online example: http://react-component.github.io/banner-anim/

View on GitHub: https://github.com/react-component/banner-anim

9.React Alice Carousel

React Alice Carousel is a React component for building content galleries, content rotators and any React carousels.

React Alice Carousel

Features of react-alice-carousel

Infinite loop
FadeOut animation
AutoPlay mode
Mobile friendly
Responsive design
Swipe to slide
Start index
Slide to index
RTL
Keyboard navigation
Touch and Drag support
Custom rendered slides
Custom animation duration
Multiple items in the slide
Show / hide anything (indicators, arrows, slides indexes)

View on Github

9.React Responsive Carousel

lightweight and fully customizable carousel component for React . Powerful, lightweight and fully customizable carousel component for React apps.
Things here are running very slowly as I have a lot of other stuff to take care at the moment so please don’t be upset if I don’t answer your question or if a PR sits unreviewed for a few days or weeks. Anyone interested in helping it move faster can help by submitting or reviewing PR’s and answering each other’s questions.

React Responsive Carousel

Features

Responsive
Mobile friendly
Swipe to slide
Mouse emulating touch
Server side rendering
Keyboard navigation
Custom animation duration
Auto play
Custom auto play interval
Infinite loop
Horizontal or Vertical directions
Supports images, videos, text content or anything you want. Each direct child represents one slide!
Supports any flux library (use selectedItem prop to set from the app state, and onChange callback to get the new position)
Show/hide anything (thumbs, indicators, arrows, status)

View on Github

10.Ars Arsenal

A react gallery picker.
Ars Arsenal

View on Github

11.React Photo Gallery

Responsive, accessible, composable, and customizable image gallery component
Maintains the original aspect ratio of your photos
Creates a masonry or justified grid
Supports row or column direction layout
Provides an image renderer for custom implementation of things like image selection, favorites, captions, etc.
SSR app compatible

Preview

Row	Column

Installation

yarn add react-photo-gallery

View on GitHub

12.React Grid Gallery

Justified image gallery component for React inspired by Google Photos.

Installation

Using npm:

npm install --save react-grid-gallery

View on GitHub

13.React Intense

A React component for viewing large images up close.This component is a port of Intense Image Viewer for use with React.
React Intense

Live Demo
http://bryce.io/react-intense/

View on Github

14.React Image Lightbox

A flexible lightbox component for displaying images in a React project.
React lightbox component.

react Image Lightbox

Features

Keyboard shortcuts (with rate limiting)
Image Zoom
Flexible rendering using src values assigned on the fly
Image preloading for smoother viewing
Mobile friendly, with pinch to zoom and swipe (Thanks, @webcarrot!)
No external CSS

View on GitHub

15.React Responsive Photo Galler

A stateless responsive React photo gallery component that maintains the original aspect ratio of your photos and scales them responsively. Add your own routing, lightbox, and manage your own state.

Responsive, accessible, composable, and customizable image gallery component
Maintains the original aspect ratio of your photos
Creates a masonry or justified grid
Supports row or column direction layout
Provides an image renderer for custom implementation of things like image selection, favorites, captions, etc.
SSR app compatible

React Responsive Photo Galler

View on GitHub

16.React Images

A simple, responsive Lightbox component for ReactJS to display an array of images.

Photos courtesy of Unsplash. Use your keyboard to navigate left right esc — Also, try resizing your browser window.

React Images

Live Demo http://jossmac.github.io/react-images/

View on GitHub: https://github.com/jossmac/react-images

#reactjs #javascript