https://github.com/bmcmahen/react-image-enlarger

Simple medium.com style image zooming with gesture support
https://github.com/bmcmahen/react-image-enlarger

gesture image-enlarger image-zoom medium-image medium-zoom react

Last synced: about 2 months ago
JSON representation

Simple medium.com style image zooming with gesture support

• Host: GitHub
• URL: https://github.com/bmcmahen/react-image-enlarger
• Owner: bmcmahen
• Created: 2019-08-01T21:52:44.000Z (about 5 years ago)
• Default Branch: master
• Last Pushed: 2022-12-11T00:29:07.000Z (almost 2 years ago)
• Last Synced: 2024-06-18T07:31:55.821Z (3 months ago)
• Topics: gesture, image-enlarger, image-zoom, medium-image, medium-zoom, react
• Language: TypeScript
• Homepage: https://codesandbox.io/embed/adoring-sun-dz5yj
• Size: 3.83 MB
• Stars: 71
• Watchers: 3
• Forks: 6
• Open Issues: 29
• Metadata Files:
  • Readme: Readme.md

Awesome Lists containing this project

README

        
# react-image-enlarger

[![npm package](https://img.shields.io/npm/v/react-image-enlarger/latest.svg)](https://www.npmjs.com/package/react-image-enlarger)

[![Follow on Twitter](https://img.shields.io/twitter/follow/benmcmahen.svg?style=social&logo=twitter)](https://twitter.com/intent/follow?screen_name=benmcmahen)

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](https://github.com/bmcmahen/sancho). Try the [demo here](https://codesandbox.io/embed/adoring-sun-dz5yj).

## 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

```jsx

import Image from "react-image-enlarger";

function SingleSource() {

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

  return (

     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