react-img-gallery

React component for building image galleries

Table of Contents

• Installation
• Features
• Example
• Demo
• Upcoming Features

Installation

To install, you can use npm or yarn:

$ npm install react-img-gallery
$ yarn add react-img-gallery

Features

• Thumbnail Navigation
• Mobile Swipe Gestures
• Support Modal View and Modal Component
• Mobile Responsive Design

Example

Here is a simple example of Gallery Component being used in an app:

import { Gallery } from 'react-img-gallery';

<Gallery>
    <img alt="image-title" src="/imgOne.jpg" />
    <img alt="image-title" src="/imgTwo.jpg" />
    <img alt="image-title" src="/imgThree.jpg" />
</Gallery>


// modal view for main image is disabled by defaul, you can enable it by setting modalIsEnabled value to true
// you can render custom image as main image by passing mainImg value, default main image is the first image
// you can override thumbnail arrows images by passing arrows image soruce for thumbnailRightArrow and thumbnailLeftArrow
// you can set custom width for gallery area by passing width as props

<Gallery modalIsEnabled={true} mainImg={4} width={'650px'}>
    {gallery.map((imgSrc) => (<img alt="" key={imgSrc} src={imgSrc} />) )}
</Gallery>

// you can use modal component separately
// you can set custom width, height and enable/disable fullscreen icon.

import { Modal } from 'react-img-gallery';

<Modal imgAlt={"image-title"} imgSrc={imageSource} width={'400px'} height={'200px'} fullScreenIconEnabled={true} /> 

Demo

Live Demo

Upcoming Features

• Update main area as slider to navigate between images.
• Resizing thumbnail images.
• Add zoom functionality.