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
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)} /> ); }
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