{"_rev":"33-55f8fc9d1ebbd047e98be6650ab62bca","time":{"created":"2025-01-14T17:01:32.427Z","modified":"2025-01-14T17:01:32.990Z","1.0.0":"2025-01-10T13:22:49.736Z","1.0.1":"2025-01-10T14:35:11.023Z","1.0.2":"2025-01-10T14:58:46.733Z","1.0.3":"2025-01-10T15:04:39.800Z","1.0.4":"2025-01-10T15:10:26.890Z","1.0.5":"2025-01-10T16:21:46.252Z","1.0.6":"2025-01-10T16:27:03.515Z","1.0.7":"2025-01-10T16:37:40.912Z","1.0.8":"2025-01-10T17:15:30.234Z","1.0.9":"2025-01-10T17:33:35.331Z","1.0.10":"2025-01-10T18:16:41.655Z","1.0.11":"2025-01-10T18:18:13.633Z","1.0.12":"2025-01-10T19:00:32.572Z","1.0.13":"2025-01-10T19:12:55.295Z","1.0.14":"2025-01-11T06:12:36.545Z","1.0.15":"2025-01-11T06:34:36.075Z","1.0.16":"2025-01-14T17:01:32.690Z"},"_id":"image-viewer-component","name":"image-viewer-component","dist-tags":{"latest":"1.0.16"},"versions":{"1.0.16":{"name":"image-viewer-component","version":"1.0.16","description":"Component to see image with unlimited zoom","license":"MIT","author":{"name":"putuangga"},"repository":{"type":"git","url":"git+https://github.com/iputuanggak/image-viewer-component.git"},"homepage":"https://github.com/iputuanggak/image-viewer-component#readme","type":"module","main":"dist/index.js","module":"dist/index.mjs","types":"dist/index.d.ts","scripts":{"test":"echo \"Error: no test specified\" && exit 1","rollup":"rollup -c --bundleConfigAsCjs"},"devDependencies":{"postcss-url":"^10.1.3","@rollup/plugin-commonjs":"^28.0.2","@rollup/plugin-node-resolve":"^16.0.0","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-typescript":"^12.1.2","@types/react":"^19.0.4","react":"^18.3.1","react-dom":"^18.3.1","rollup-plugin-dts":"^6.1.1","rollup-plugin-peer-deps-external":"^2.2.4","rollup-plugin-postcss":"^4.0.2","tslib":"^2.8.1","typescript":"^5.7.3"},"peerDependencies":{"react":"^18.0.0","react-dom":"^18.0.0"},"engines":{"node":">=12.0.0"},"_id":"image-viewer-component@1.0.16","gitHead":"a32599d28db25e5325c0777cc38fa16096e40502","bugs":{"url":"https://github.com/iputuanggak/image-viewer-component/issues"},"_nodeVersion":"22.12.0","_npmVersion":"11.0.0","dist":{"integrity":"sha512-63aeCH1TjydQClSs8B7BRIfGzPaecpPuyPheh/S8xBPHG7O0qV8AxSB8mXDiSKwkllhYTFkOtKms/cl9BfJpfw==","shasum":"4a4f94039b06367066edf0bf4f87508239cf24d6","tarball":"https://registry.npmjs.org/image-viewer-component/-/image-viewer-component-1.0.16.tgz","fileCount":6,"unpackedSize":61144,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIHb1f6WtqDmWLacQ+oW3pZpifblxs3UJswXI5ZC774euAiEAt0qfnPeHTuzvPeJ9s564LZaX7sLPa0MZLM25XRxY7Zk="}]},"_npmUser":{"name":"putuangga","email":"iputuanggakrisna@gmail.com"},"directories":{},"maintainers":[{"name":"putuangga","email":"iputuanggakrisna@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/image-viewer-component_1.0.16_1736874092428_0.5038108182707353"},"_hasShrinkwrap":false}},"maintainers":[{"name":"putuangga","email":"iputuanggakrisna@gmail.com"}],"description":"Component to see image with unlimited zoom","homepage":"https://github.com/iputuanggak/image-viewer-component#readme","repository":{"type":"git","url":"git+https://github.com/iputuanggak/image-viewer-component.git"},"author":{"name":"putuangga"},"bugs":{"url":"https://github.com/iputuanggak/image-viewer-component/issues"},"license":"MIT","readme":"\r\n## Introduction\r\n\r\nI love [react-viewer](https://github.com/infeng/react-viewer). The reason because I can do unlimited zoom, that's amazing!\r\nBut, it hasn't been updated for 5 years and the UI needs to be revamped. \r\nSo, I decided to do some adjustment (many), such as:\r\n* update the react version. 16 -> 18\r\n* adjust the code for typescript update\r\n* add props for image description. It's not image alt\r\n* add and improve touch support from [KittenApps](https://github.com/infeng/react-viewer/pull/159)\r\n* replace all icons with [Material Symbol](https://fonts.google.com/icons) from Google\r\n* change layout \r\n* 0 dependencies and 13 dev dependecies (75% fewer than the original)\r\n\r\n[Demo Link](https://putu-angga.vercel.app/demo/image-viewer-component)\r\n\r\n\r\n## Installation\r\n\r\n> react >= 18.0.0 | react-dom >= 18.0.0\r\n\r\n```bash\r\nnpm install image-viewer-component --save\r\n```\r\n\r\n## Usage\r\n\r\n```javascript\r\nimport Viewer from 'image-viewer-component';\r\n\r\nfunction App() {\r\n  const [ visible, setVisible ] = useState(false);\r\n\r\n  return (\r\n    <div>\r\n      <button onClick={() => { setVisible(true); } }>show</button>\r\n      <Viewer\r\n      visible={visible}\r\n      onClose={() => { setVisible(false); } }\r\n      images={[{src: '', alt: ''}]}\r\n      />\r\n    </div>\r\n  );\r\n}\r\n```\r\n\r\n\r\n## Props\r\n\r\n| props        | type         | default | description                 | required |\r\n|--------------|--------------|---------|-----------------------------|----------|\r\n| visible      | string       |  false  | Viewer visible             | true |\r\n| onClose      | function       |  -      | Specify a function that will be called when Visible close   | true |\r\n| images       | [ImageDecorator](#imagedecorator)[]     | []      | image source array | true  |\r\n| activeIndex  | number       | 0       | active image index | false |\r\n| zIndex       | number       | 1000    | Viewer css z-index | false |\r\n| container    | HTMLElement  | null    | set parent node(inline mode) | false |\r\n| drag         | boolean      | true    | whether to drag image | false |\r\n| attribute    | boolean      | true    | whether to show image attribute | false |\r\n| zoomable     | boolean      | true    | whether to show 'zoom' button | false |\r\n| rotatable    | boolean      | true    | whether to show 'rotate' button | false |\r\n| scalable     | boolean      | true    | whether to show 'scale' button | false |\r\n| onMaskClick  | (e) => void  |   -     | callback function when mask is clicked | false |\r\n| downloadable     | boolean      |  false  | whether to show 'download' | false |\r\n| noClose      | boolean      |  false  | to not render close button | false |\r\n| noNavbar     | boolean      |  false  | to not render the navbar | false |\r\n| noToolbar    | boolean      |  false  | to not render the toolbar | false |\r\n| noImgDetails | boolean      |  false  | to not render image detail (WxH) | false |\r\n| noFooter     | boolean      |  false  | to not render the entire footer | false |\r\n| changeable   | boolean      |  true   | wheather to show change button  | false |\r\n| customToolbar | (defaultToolbarConfigs: [ToolbarConfig](#toolbarconfig)[]) => ToolbarConfig[] | - | customer toolbar | false |\r\n| zoomSpeed    | number       | 0.05    | zoom speed | false |\r\n| defaultSize    | [ViewerImageSize](#viewerimagesize) | - | default image size | false |\r\n| defaultImg    | [viewerdefaultimg](#viewerimagesize) | - | if load img failed, show default img | false |\r\n| disableKeyboardSupport | boolean | false | disable keyboard support | false |\r\n| noResetZoomAfterChange | boolean | false | preserve zoom after image change | false |\r\n| noLimitInitializationSize | boolean | false | no limit image initialization size | false |\r\n| defaultScale | number | 1 | set default scale | false |\r\n| onChange | (activeImage: [ImageDecorator](#imagedecorator), index: number) => void | - | callback when image change | false |\r\n| loop         | boolean      |  true   | whether enable image loop | false |\r\n| disableMouseZoom   | boolean      |  false   | whether disable mouse zoom | false |\r\n| downloadInNewWindow | boolean | false | whether to download in a new window | false |\r\n| className   | string    |  -  | customized CSS class | false |\r\n| showTotal   | boolean    |  true  | whether to display the total number and range | false |\r\n| totalName | string | 'of' | total image separator name | false | \r\n| maxScale   | number    |  -  | maximum scaling | false |\r\n| minScale   | number    |  0.1  | minimum scaling | false |\r\n| exportFileName | string | 'exportFile' | customize download's filename | false |\r\n\r\n### ImageDecorator\r\n\r\n| props       | type         | default | description                 | required |\r\n|-------------|--------------|---------|-----------------------------|----------|\r\n| src  | string  |  -  | image source | true |\r\n| alt  | string  |  -  | image alt | false |\r\n| description  | string  |  -  | image description | false |\r\n| downloadUrl  | string  |  -  | image downlaod url | false |\r\n| defaultSize  | [ViewerImageSize](#viewerimagesize)  |  -  | image size | false |\r\n\r\n### ViewerImageSize\r\n\r\n| props       | type         | default | description                 | required |\r\n|-------------|--------------|---------|-----------------------------|----------|\r\n| width  | number  |  -  | image width | true |\r\n| height  | number  |  -  | image height | true |\r\n\r\n### ViewerDefaultImg\r\n\r\n| props       | type         | default | description                 | required |\r\n|-------------|--------------|---------|-----------------------------|----------|\r\n| src  | number  |  -  | image source | true |\r\n| width  | number  |  -  | image width | false |\r\n| height  | number  |  -  | image height | false |\r\n\r\n### ToolbarConfig\r\n\r\n| props       | type         | default | description                 | required |\r\n|-------------|--------------|---------|-----------------------------|----------|\r\n| key  | string  |  -  | tool key | true |\r\n| render  | React.ReactNode  |  -  | tool render | false |\r\n| onClick  | function  |  -  | callback function when action is clicked | false |\r\n\r\n## Keyboard support\r\n\r\n- `Esc`: Close viewer.\r\n- `←`: View the previous image.\r\n- `→`: View the next image.\r\n- `↑`: Zoom in the image.\r\n- `↓`: Zoom out the image.\r\n- `Ctrl + 1`: Reset the image.\r\n- `Ctrl + ←`: Rotate left the image.\r\n- `Ctrl + →`: Rotate right the image.\r\n\r\n## License\r\n\r\nMIT\r\n","readmeFilename":"README.md"}