# react-gesture-gallery > an image gallery with gesture support Latest version **1.1.0** (published 2019-08-21) · MIT license · 0 weekly downloads ## Install ```sh npm install react-gesture-gallery pnpm add react-gesture-gallery yarn add react-gesture-gallery bun add react-gesture-gallery ``` ## Health **Score 30/100 (F)** — status: abandoned. Positive: has types; esm support; no vulnerabilities; high quality score. Warnings: low downloads. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.1.0 | | Published | 2019-08-21 | | First published | 2019-05-17 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | bundled | | Module format | ESM + CommonJS | | Dependencies | 4 | | Unpacked size | 3.5 MB | | Known vulnerabilities | 0 | | Install scripts | no | | GitHub stars | 13 | | Author | Ben McMahen | | Maintainers | bmcmahen | | Keywords | react, gesture, gallery, carousel, react-spring | ## Links - npm: https://www.npmjs.com/package/react-gesture-gallery - Repository: https://github.com/bmcmahen/react-gesture-gallery - Homepage: https://github.com/bmcmahen/react-gesture-gallery#readme - Issues: https://github.com/bmcmahen/react-gesture-gallery/issues - npm.io page: https://npm.io/package/react-gesture-gallery ## Dependencies (4) - [tslib](https://npm.io/package/tslib.md) ^1.9.3 - [@types/react](https://npm.io/package/@types/react.md) ^16.8.10 - [@types/react-dom](https://npm.io/package/@types/react-dom.md) ^16.8.3 - [react-page-controller](https://npm.io/package/react-page-controller.md) ^3.1.0 ## Alternatives - [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads - [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads - [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads - [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads - [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads ## Recent versions - 1.1.0 (latest) — 2019-08-21 - 1.0.2 — 2019-08-21 - 1.0.1 — 2019-06-28 - 1.0.0 — 2019-05-17 ## README
A demo showing images being swiped left or right.
# react-gesture-gallery [![npm package](https://img.shields.io/npm/v/react-gesture-gallery/latest.svg)](https://www.npmjs.com/package/react-gesture-gallery) [![Follow on Twitter](https://img.shields.io/twitter/follow/benmcmahen.svg?style=social&logo=twitter)](https://twitter.com/intent/follow?screen_name=benmcmahen) A simple image gallery built with react which works nicely on desktop and mobile devices. [View the demo](https://codesandbox.io/embed/react-gesture-gallery-dup51) ## 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: ```jsx 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 (
{ setIndex(i); }} > {images.map(img => ( ))}
); } ``` ## 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 | How to display the image | ## License MIT --- _Source: https://npm.io/package/react-gesture-gallery · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._