Skip to content
Simple medium.com style image zooming with gesture support
TypeScript JavaScript
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.storybook initial commit Aug 1, 2019
src add custom overlayColor. closes #1 Aug 2, 2019
stories add custom overlayColor. closes #1 Aug 2, 2019
.gitignore fix build Aug 1, 2019
.npmignore initial commit Aug 1, 2019
Readme.md add custom overlayColor. closes #1 Aug 2, 2019
babel.config.js initial commit Aug 1, 2019
jest.config.js initial commit Aug 1, 2019
package.json 1.0.2 Aug 2, 2019
rollup.config.js fix build Aug 1, 2019
tsconfig.json initial commit Aug 1, 2019
yarn.lock initial commit Aug 1, 2019

Readme.md

react-image-enlarger

npm package Follow on Twitter

A medium.com style image zoom component with gesture dismissal similar to that found in the iOS Photos app. Originally built for use in Sancho-UI. Try the demo here.

Features

  • Drag to dismiss
  • Optionally use a differernt enlarged image source
  • Optional loading indicator when loading the enlarged image
  • Spring based animations

Install

Install react-image-enlarger and react-gesture-responder using yarn or npm.

yarn add react-image-enlarger react-gesture-responder

Usage

import Image from "react-image-enlarger";

function SingleSource() {
  const [zoomed, setZoomed] = React.useState(false);

  return (
    <Image
      style={{ width: "200px", height: "auto" }}
      zoomed={zoomed}
      src="my-image.jpg"
      alt="The best dog ever"
      onClick={() => setZoomed(true)}
      onRequestClose={() => setZoomed(false)}
    />
  );
}

API

Any additional props beyond the ones listed below are passed to the thumbnail image.

Name Type Default Value Description
zoomed* boolean Whether the enlarged image is shown
onRequestClose* () => void; A callback for closing the zoomed image
renderLoading React.ReactNode Render a loading indicator
src* String The thumbnail image source (and enlarged, if not provided)
enlargedSrc String An optional larger image source
overlayColor String Customize the background color of the overlay

License

MIT

You can’t perform that action at this time.