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.
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"; { const zoomed setZoomed = React; return <Image = = ="my-image.jpg" ="The best dog ever" = = /> ;}
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