A medium.com style image zoom component with gesture dismissal
npm install react-image-enlarger

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.
- Drag to dismiss
- Optionally use a differernt enlarged image source
- Optional loading indicator when loading the enlarged image
- Spring based animations
Install react-image-enlarger and react-gesture-responder using yarn or npm.
```
yarn add react-image-enlarger react-gesture-responder
`jsx
import Image from "react-image-enlarger";
function SingleSource() {
const [zoomed, setZoomed] = React.useState(false);
return (
zoomed={zoomed}
src="my-image.jpg"
alt="The best dog ever"
onClick={() => setZoomed(true)}
onRequestClose={() => setZoomed(false)}
/>
);
}
``
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 |
MIT