react-sleek-photo-gallery

A beautiful photo gallery with mobile gestures support. For React

Inspired by Apple Photos

Features

• responsive gallery that works on mobile and desktop
• mobile gestures support
• horizontal thumbnails scroller
• thumbnails maintain the aspect ratio
• animated user interface
• presentation mode
• works perfectly in full-screen mode

Installation

To install:

npm install --save react-sleek-photo-gallery

Demo

Full-screen photo gallery (photos taken by me)

Local build

To build the demo locally, run:

npm install
npm start

Then open localhost:8080 in a browser.

Usage

import React from 'react';
import Gallery from 'react-sleek-photo-gallery';
import styles from 'react-sleek-photo-gallery/dist/style.css';
 
export default function ExampleApp() {
  const PHOTOS = [
    'http://example.com/example/img1.jpg',
    'http://example.com/example/img2.jpg',
    'http://example.com/example/img3.jpg',
    'http://example.com/example/img4.jpg',
    'http://example.com/example/img5.jpg',
    'http://example.com/example/img6.jpg'
  ];
 
  return (
    <Gallery images={PHOTOS} />
  );
}

Roadmap

• Replace the arrows with SVG icons
• Add customisable thumbnail overlay
• Fix spinner in Thumbnails component
• Add image change animation to the Image component