Skip to content
a react image gallery with gesture support
Branch: master
Clone or download
Latest commit 3d19754 Jun 27, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook add controls May 17, 2019
src don't hide on hover. closes #2 Jun 28, 2019
stories make indicators display by default May 17, 2019
.gitignore
.npmignore add controls May 17, 2019
Readme.md Update Readme.md Jun 17, 2019
babel.config.js add controls May 17, 2019
demo.gif
jest.config.js add controls May 17, 2019
package.json 1.0.1 Jun 28, 2019
rollup.config.js add controls May 17, 2019
tsconfig.json add controls May 17, 2019
yarn.lock add controls May 17, 2019

Readme.md

A demo showing images being swiped left or right.

react-gesture-gallery

npm package Follow on Twitter

A simple image gallery built with react which works nicely on desktop and mobile devices. View the demo

Install

Install react-gesture-gallery and its peer dependency, react-gesture-responder using yarn or npm.

yarn add react-gesture-gallery react-gesture-responder

Basic usage

By default, the gallery will attempt to fit into its container using height: 100% and width: 100%, so you should generally provide a container with a set width and height. For a full-screen gallery, using width: 100vw and height: 100vh. Note that this library doesn't display in a modal by default, but it's easy enough to provide your own.

The example gif above is generated by this code:

import * as React from "react";
import { Gallery, GalleryImage } from "react-gesture-gallery";

function Example() {
  const [index, setIndex] = React.useState(0);

  const images = [
    {
      src:
        "https://images.unsplash.com/photo-1557958114-3d2440207108?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80"
    },
    {
      src:
        "https://images.unsplash.com/photo-1557939403-1760a0e47505?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1931&q=80"
    },
    {
      src:
        "https://images.unsplash.com/photo-1558029062-a37889b87526?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=975&q=80"
    },
    {
      src:
        "https://images.unsplash.com/photo-1558088458-b65180740294?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1579&q=80"
    },
    {
      src:
        "https://images.unsplash.com/photo-1558039719-79cb7b60d279?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1950&q=80"
    }
  ];

  return (
    <div style={{ background: "black", width: "100vw", height: "100vh" }}>
      <Gallery
        index={index}
        onRequestChange={i => {
          setIndex(i);
        }}
      >
        {images.map(img => (
          <GalleryImage objectFit="contain" key={img.src} src={img.src} />
        ))}
      </Gallery>
    </div>
  );
}

API

Gallery

Name Type Default Value Description
index * number The index of gallery to show
onRequestChange * (i: number) => void; A callback requesting the active image change
enableKeyboard boolean true Enable keyboard controls
children * GalleryImage[] A set of gallery images to diplay
enableControls boolean true Enable back and forward arrows
enableIndicators boolean true Enable back and forward indicators

GalleryImage

Name Type Default Value Description
src * string The image source
srcSet string The image source set
alt string Alt tag for the image
objectFit 'cover contain' 'contain'

License

MIT

You can’t perform that action at this time.