{"id":19222639,"url":"https://github.com/mohammadarsalan/react-draggable-image-viewer","last_synced_at":"2026-05-10T05:47:15.330Z","repository":{"id":35150870,"uuid":"213361482","full_name":"MOHAMMADArsalan/react-draggable-image-viewer","owner":"MOHAMMADArsalan","description":"A slack like image viewer for react.","archived":false,"fork":false,"pushed_at":"2023-03-02T01:04:26.000Z","size":2345,"stargazers_count":0,"open_issues_count":7,"forks_count":0,"subscribers_count":2,"default_branch":"master","last_synced_at":"2025-02-05T03:34:58.484Z","etag":null,"topics":["component","draggable","draggableimage","draggableview","image-viewer","javascript","react","slack","zoom","zoom-images"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/MOHAMMADArsalan.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-10-07T11:06:34.000Z","updated_at":"2022-02-15T12:27:38.000Z","dependencies_parsed_at":"2025-01-04T20:44:00.722Z","dependency_job_id":"0f46c909-de9f-4326-af5a-c7d96248af2e","html_url":"https://github.com/MOHAMMADArsalan/react-draggable-image-viewer","commit_stats":{"total_commits":4,"total_committers":1,"mean_commits":4.0,"dds":0.0,"last_synced_commit":"c30fba0391c0993fb6fd6fd7d834a4106e25f523"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MOHAMMADArsalan%2Freact-draggable-image-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MOHAMMADArsalan%2Freact-draggable-image-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MOHAMMADArsalan%2Freact-draggable-image-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MOHAMMADArsalan%2Freact-draggable-image-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MOHAMMADArsalan","download_url":"https://codeload.github.com/MOHAMMADArsalan/react-draggable-image-viewer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":240298402,"owners_count":19779280,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","draggable","draggableimage","draggableview","image-viewer","javascript","react","slack","zoom","zoom-images"],"created_at":"2024-11-09T15:05:03.108Z","updated_at":"2026-05-10T05:47:15.289Z","avatar_url":"https://github.com/MOHAMMADArsalan.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# react-draggable-image-viewer\n\n**React Draggable image zoom component**\nA slack like image viewer for react.\n\n\u003cp align=\"center\"\u003e\n \u003cimg src=\"https://raw.githubusercontent.com/MOHAMMADArsalan/react-draggable-image-viewer/master/Assets/demo1.png\" width=600 alt=\"Demo 1\"\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n \u003cimg src=\"https://raw.githubusercontent.com/MOHAMMADArsalan/react-draggable-image-viewer/master/Assets/demo2.png\" width=600 alt=\"Demo 2\"\u003e\n\u003c/p\u003e\n\n## Usage\n\nInstall the package using NPM:\n\n```\nnpm install react-draggable-image-viewer --save\n```\n\nAdd the component to your React application:\n\n```jsx\nimport ImageView from \"react-draggable-image-viewer\";\nimport yourImage from \"./path/to/image\";\n\nexport default function ExampleComponent() {\n return \u003cImageView src=[yourImage] width={500} /\u003e;\n}\n```\n\n## Configuration\n\n| Prop | Type | Default | Description |\n| ---------------- | ------------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- |\n| `images` (required) | Array of String | [] | URL/path of the large image |\n| `onHide` | Function | `function() {}` | call when user click on close icon |\n| `isActive` | Boolean| `false` | will show and hide image view component |\n| `Draggable` | Boolean | `false` | allow to drag image\n| `activePhotoIndex` | Number | `0` | start displaying image from given index\n| `maxWidth` | Number | `300` | max Width will be use for calculate image aspect ratio\n| `maxHeight` | Number | `300` | max Height will be use for calculate image aspect ratio\n\n\n## Development\n\nRequirements: Node.js, Yarn\n\n1. Clone this repository: `git clone [repo-url]`\n2. Install all dependencies: `yarn install`\n3. Run `yarn start` to generate the library bundle using [Webpack](https://webpack.js.org/)\n\nSuggestions and contributions are always welcome! Please first discuss changes via issue before submitting a pull request.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohammadarsalan%2Freact-draggable-image-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmohammadarsalan%2Freact-draggable-image-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmohammadarsalan%2Freact-draggable-image-viewer/lists"}