|
1 | 1 | # react-image-enlarger |
2 | 2 |
|
3 | | -A medium.com style image zoom component with gesture dismissal |
| 3 | +[](https://www.npmjs.com/package/react-image-enlarger) |
| 4 | +[](https://twitter.com/intent/follow?screen_name=benmcmahen) |
| 5 | + |
| 6 | +A medium.com style image zoom component with gesture dismissal similar to that found in the iOS Photos app. |
| 7 | + |
| 8 | +## Features |
| 9 | + |
| 10 | +- Drag to dismiss |
| 11 | +- Optionally use a differernt enlarged image source |
| 12 | +- Optional loading indicator when loading the enlarged image |
| 13 | +- Spring based animations |
4 | 14 |
|
5 | 15 | ## Install |
6 | 16 |
|
| 17 | +Install `react-image-enlarger` and `react-gesture-responder` using yarn or npm. |
| 18 | + |
7 | 19 | ``` |
8 | | -yarn add react-image-enlarger |
| 20 | +yarn add react-image-enlarger react-gesture-responder |
| 21 | +``` |
| 22 | + |
| 23 | +## Usage |
| 24 | + |
| 25 | +```jsx |
| 26 | +import Image from "react-image-enlarger"; |
| 27 | + |
| 28 | +function SingleSource() { |
| 29 | + const [zoomed, setZoomed] = React.useState(false); |
| 30 | + |
| 31 | + return ( |
| 32 | + <Image |
| 33 | + style={{ width: "200px", height: "auto" }} |
| 34 | + zoomed={zoomed} |
| 35 | + src="my-image.jpg" |
| 36 | + alt="The best dog ever" |
| 37 | + onClick={() => setZoomed(true)} |
| 38 | + onRequestClose={() => setZoomed(false)} |
| 39 | + /> |
| 40 | + ); |
| 41 | +} |
9 | 42 | ``` |
| 43 | + |
| 44 | +## API |
| 45 | + |
| 46 | +Any additional props beyond the ones listed below are passed to the thumbnail image. |
| 47 | + |
| 48 | +| Name | Type | Default Value | Description | |
| 49 | +| ---------------- | --------------- | ------------- | ---------------------------------------------------------- | |
| 50 | +| zoomed\* | boolean | | Whether the enlarged image is shown | |
| 51 | +| onRequestClose\* | () => void; | | A callback for closing the zoomed image | |
| 52 | +| renderLoading | React.ReactNode | | Render a loading indicator | |
| 53 | +| src\* | String | | The thumbnail image source (and enlarged, if not provided) | |
| 54 | +| enlargedSrc | String | | An optional larger image source | |
| 55 | + |
| 56 | +## License |
| 57 | + |
| 58 | +MIT |
0 commit comments