{"id":13406580,"url":"https://github.com/infeng/react-viewer","last_synced_at":"2025-05-14T03:08:12.141Z","repository":{"id":11407478,"uuid":"69578238","full_name":"infeng/react-viewer","owner":"infeng","description":"react image viewer, supports rotation, scale, zoom and so on","archived":false,"fork":false,"pushed_at":"2025-02-13T20:25:53.000Z","size":4068,"stargazers_count":756,"open_issues_count":69,"forks_count":140,"subscribers_count":15,"default_branch":"master","last_synced_at":"2025-04-06T17:52:32.667Z","etag":null,"topics":["gallery","image","image-gallery","photos","picture","react","react-components","reactjs","viewer","viewerjs"],"latest_commit_sha":null,"homepage":"https://infeng.github.io/react-viewer","language":"TypeScript","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/infeng.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":"2016-09-29T14:57:05.000Z","updated_at":"2025-03-23T15:03:09.000Z","dependencies_parsed_at":"2024-06-18T12:25:51.002Z","dependency_job_id":"a997bfbc-02d4-4cf3-94f1-3969310b6b07","html_url":"https://github.com/infeng/react-viewer","commit_stats":{"total_commits":270,"total_committers":15,"mean_commits":18.0,"dds":"0.20370370370370372","last_synced_commit":"e9518161e83ba349c4c4555e4c8c0138cb2cc5dc"},"previous_names":[],"tags_count":50,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/infeng%2Freact-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/infeng%2Freact-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/infeng%2Freact-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/infeng%2Freact-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/infeng","download_url":"https://codeload.github.com/infeng/react-viewer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248624794,"owners_count":21135499,"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":["gallery","image","image-gallery","photos","picture","react","react-components","reactjs","viewer","viewerjs"],"created_at":"2024-07-30T19:02:34.038Z","updated_at":"2025-04-12T19:39:56.347Z","avatar_url":"https://github.com/infeng.png","language":"TypeScript","readme":"# react-viewer\n\n[![NPM version][npm-image]][npm-url] [![](https://travis-ci.org/infeng/react-viewer.svg?branch=master)](https://travis-ci.org/infeng/react-viewer) [![codecov](https://codecov.io/gh/infeng/react-viewer/branch/master/graph/badge.svg)](https://codecov.io/gh/infeng/react-viewer)\n\u003e react image viewer.\n\n## Introduction\n\nBecause I can`t be comfortable using [viewerjs](https://github.com/fengyuanchen/viewerjs) in react, so I created react-viewer to replace it.\n\n## Installation\n\n\u003e react \u003e= 16.8.0 | react-dom \u003e= 16.8.0\n\n```bash\nnpm install react-viewer --save\n```\n\n## Usage\n\n```javascript\nimport * as React from 'react';\nimport Viewer from 'react-viewer';\n\nfunction App() {\n  const [ visible, setVisible ] = React.useState(false);\n\n  return (\n    \u003cdiv\u003e\n      \u003cbutton onClick={() =\u003e { setVisible(true); } }\u003eshow\u003c/button\u003e\n      \u003cViewer\n      visible={visible}\n      onClose={() =\u003e { setVisible(false); } }\n      images={[{src: '', alt: ''}]}\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Server Side (NextJS)\n\n```\nimport React, { FC } from 'react'\nimport dynamic from 'next/dynamic'\n\nconst ReactViewer = dynamic(\n  () =\u003e import('react-viewer'),\n  { ssr: false }\n)\n\nexport const Viewer: FC = () =\u003e {\n  return (\n    \u003cReactViewer\n      visible={true}\n      onClose={() =\u003e {}}\n      images={[{src: ''}]}\n    /\u003e\n  )\n}\n\nexport default Viewer\n```\n\n## Server Side rest..\nI'm sorry, ssr is not currently supported in `3.x`, it will be fixed in `4.0`.\n\n## Props\n\n| props        | type         | default | description                 | required |\n|--------------|--------------|---------|-----------------------------|----------|\n| visible      | string       |  false  | Viewer visible             | true |\n| onClose      | function       |  -      | Specify a function that will be called when Visible close   | true |\n| images       | [ImageDecorator](#imagedecorator)[]     | []      | image source array | true  |\n| activeIndex  | number       | 0       | active image index | false |\n| zIndex       | number       | 1000    | Viewer css z-index | false |\n| container    | HTMLElement  | null    | set parent node(inline mode) | false |\n| drag         | boolean      | true    | whether to drag image | false |\n| attribute    | boolean      | true    | whether to show image attribute | false |\n| zoomable     | boolean      | true    | whether to show 'zoom' button | false |\n| rotatable    | boolean      | true    | whether to show 'rotate' button | false |\n| scalable     | boolean      | true    | whether to show 'scale' button | false |\n| onMaskClick  | (e) =\u003e void  |   -     | callback function when mask is clicked | false |\n| downloadable     | boolean      |  false  | whether to show 'download' | false |\n| noClose      | boolean      |  false  | to not render close button | false |\n| noNavbar     | boolean      |  false  | to not render the navbar | false |\n| noToolbar    | boolean      |  false  | to not render the toolbar | false |\n| noImgDetails | boolean      |  false  | to not render image detail (WxH) | false |\n| noFooter     | boolean      |  false  | to not render the entire footer | false |\n| changeable   | boolean      |  true   | wheather to show change button  | false |\n| customToolbar | (defaultToolbarConfigs: [ToolbarConfig](#toolbarconfig)[]) =\u003e ToolbarConfig[] | - | customer toolbar | false |\n| zoomSpeed    | number       | 0.05    | zoom speed | false |\n| defaultSize    | [ViewerImageSize](#viewerimagesize) | - | default image size | false |\n| defaultImg    | [viewerdefaultimg](#viewerimagesize) | - | if load img failed, show default img | false |\n| disableKeyboardSupport | boolean | false | disable keyboard support | false |\n| noResetZoomAfterChange | boolean | false | preserve zoom after image change | false |\n| noLimitInitializationSize | boolean | false | no limit image initialization size | false |\n| defaultScale | number | 1 | set default scale | false |\n| onChange | (activeImage: [ImageDecorator](#imagedecorator), index: number) =\u003e void | - | callback when image change | false |\n| loop         | boolean      |  true   | whether enable image loop | false |\n| disableMouseZoom   | boolean      |  false   | whether disable mouse zoom | false |\n| downloadInNewWindow | boolean | false | whether to download in a new window | false |\n| className   | string    |  -  | customized CSS class | false |\n| showTotal   | boolean    |  true  | whether to display the total number and range | false |\n| totalName | string | 'of' | total image separator name | false | \n| maxScale   | number    |  -  | maximum scaling | false |\n| minScale   | number    |  0.1  | minimum scaling | false |\n| exportFileName | string | 'exportFile' | customize download's filename | false |\n\n### ImageDecorator\n\n| props       | type         | default | description                 | required |\n|-------------|--------------|---------|-----------------------------|----------|\n| src  | string  |  -  | image source | true |\n| alt  | string  |  -  | image description | false |\n| downloadUrl  | string  |  -  | image downlaod url | false |\n| defaultSize  | [ViewerImageSize](#viewerimagesize)  |  -  | image size | false |\n\n### ViewerImageSize\n\n| props       | type         | default | description                 | required |\n|-------------|--------------|---------|-----------------------------|----------|\n| width  | number  |  -  | image width | true |\n| height  | number  |  -  | image height | true |\n\n### ViewerDefaultImg\n\n| props       | type         | default | description                 | required |\n|-------------|--------------|---------|-----------------------------|----------|\n| src  | number  |  -  | image source | true |\n| width  | number  |  -  | image width | false |\n| height  | number  |  -  | image height | false |\n\n### ToolbarConfig\n\n| props       | type         | default | description                 | required |\n|-------------|--------------|---------|-----------------------------|----------|\n| key  | string  |  -  | tool key | true |\n| render  | React.ReactNode  |  -  | tool render | false |\n| onClick  | function  |  -  | callback function when action is clicked | false |\n\n## Keyboard support\n\n- `Esc`: Close viewer.\n- `←`: View the previous image.\n- `→`: View the next image.\n- `↑`: Zoom in the image.\n- `↓`: Zoom out the image.\n- `Ctrl + 1`: Reset the image.\n- `Ctrl + ←`: Rotate left the image.\n- `Ctrl + →`: Rotate right the image.\n\n## License\n\nMIT\n\n[npm-image]: https://badge.fury.io/js/react-viewer.svg\n[npm-url]: https://npmjs.org/package/react-viewer\n","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finfeng%2Freact-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Finfeng%2Freact-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Finfeng%2Freact-viewer/lists"}