Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/mohammadarsalan/react-draggable-image-viewer
A slack like image viewer for react.
https://github.com/mohammadarsalan/react-draggable-image-viewer
component draggable draggableimage draggableview image-viewer javascript react slack zoom zoom-images
Last synced: 5 days ago
JSON representation
A slack like image viewer for react.
- Host: GitHub
- URL: https://github.com/mohammadarsalan/react-draggable-image-viewer
- Owner: MOHAMMADArsalan
- License: mit
- Created: 2019-10-07T11:06:34.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2023-03-02T01:04:26.000Z (over 1 year ago)
- Last Synced: 2024-11-07T23:52:49.852Z (7 days ago)
- Topics: component, draggable, draggableimage, draggableview, image-viewer, javascript, react, slack, zoom, zoom-images
- Language: JavaScript
- Size: 2.24 MB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 7
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-draggable-image-viewer
**React Draggable image zoom component**
A slack like image viewer for react.
## Usage
Install the package using NPM:
```
npm install react-draggable-image-viewer --save
```
Add the component to your React application:
```jsx
import ImageView from "react-draggable-image-viewer";
import yourImage from "./path/to/image";
export default function ExampleComponent() {
return ;
}
```
## Configuration
| Prop | Type | Default | Description |
| ---------------- | ------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `images` (required) | Array of String | [] | URL/path of the large image |
| `onHide` | Function | `function() {}` | call when user click on close icon |
| `isActive` | Boolean| `false` | will show and hide image view component |
| `Draggable` | Boolean | `false` | allow to drag image
| `activePhotoIndex` | Number | `0` | start displaying image from given index
| `maxWidth` | Number | `300` | max Width will be use for calculate image aspect ratio
| `maxHeight` | Number | `300` | max Height will be use for calculate image aspect ratio
## Development
Requirements: Node.js, Yarn
1. Clone this repository: `git clone [repo-url]`
2. Install all dependencies: `yarn install`
3. Run `yarn start` to generate the library bundle using [Webpack](https://webpack.js.org/)
Suggestions and contributions are always welcome! Please first discuss changes via issue before submitting a pull request.