Skip to content

Commit 336cea5

Browse files
committed
add basic readme
1 parent e3dd009 commit 336cea5

File tree

2 files changed

+52
-3
lines changed

2 files changed

+52
-3
lines changed

Readme.md

Lines changed: 51 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,58 @@
11
# react-image-enlarger
22

3-
A medium.com style image zoom component with gesture dismissal
3+
[![npm package](https://img.shields.io/npm/v/react-image-enlarger/latest.svg)](https://www.npmjs.com/package/react-image-enlarger)
4+
[![Follow on Twitter](https://img.shields.io/twitter/follow/benmcmahen.svg?style=social&logo=twitter)](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
414

515
## Install
616

17+
Install `react-image-enlarger` and `react-gesture-responder` using yarn or npm.
18+
719
```
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+
}
942
```
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

src/index.tsx

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ export interface ImageEnlargerProps extends React.HTMLAttributes<any> {
1616
onClick: () => void;
1717
enlargedSrc?: string;
1818
renderLoading?: React.ReactNode;
19-
onRequestClose?: () => void;
19+
onRequestClose: () => void;
2020
src: string;
2121
}
2222

0 commit comments

Comments
 (0)