react-iv-viewer - npm Package Compare versions

Comparing version 0.1.2 to 1.0.0

dist/ImageViewer.d.ts

 import React from 'react';
-import 'iv-viewer/dist/iv-viewer.css';
 import { ImageViewerProps } from './types';
 export declare const ImageViewer: React.FC<ImageViewerProps>;

dist/react-iv-viewer.cjs.development.js

@@ -10,3 +10,2 @@ 'use strict';
 var ivViewer = require('iv-viewer');
-require('iv-viewer/dist/iv-viewer.css');
 
@@ -48,3 +47,4 @@ function _extends() {
     hasZoomButtons = _ref$hasZoomButtons === void 0 ? true : _ref$hasZoomButtons,
-    zoomStep = _ref.zoomStep,
+    _ref$zoomStep = _ref.zoomStep,
+    zoomStep = _ref$zoomStep === void 0 ? 50 : _ref$zoomStep,
     onLoad = _ref.onLoad,
@@ -92,5 +92,5 @@ _ref$alt = _ref.alt,
     onClick: handleOnClick,
-    style: _extends({}, rest.style, {
+    style: _extends({
       cursor: 'pointer'
-    }),
+    }, rest.style),
     alt: alt
@@ -104,6 +104,4 @@ }));
     hiResImg = _ref.hiResImg,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? '100%' : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? '100%' : _ref$height,
+    width = _ref.width,
+    height = _ref.height,
     zoom = _ref.zoom,
@@ -122,3 +120,4 @@ _ref$defaultZoom = _ref.defaultZoom,
     hasZoomButtons = _ref$hasZoomButtons === void 0 ? true : _ref$hasZoomButtons,
-    zoomStep = _ref.zoomStep,
+    _ref$zoomStep = _ref.zoomStep,
+    zoomStep = _ref$zoomStep === void 0 ? 50 : _ref$zoomStep,
     onZoomChange = _ref.onZoomChange,
@@ -125,0 +124,0 @@ onLoad = _ref.onLoad,

dist/react-iv-viewer.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,o=require("react"),n=(e=o)&&"object"==typeof e&&"default"in e?e.default:e,r=require("iv-viewer");function t(){return(t=Object.assign?Object.assign.bind():function(e){for(var o=1;o<arguments.length;o++){var n=arguments[o];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(null,arguments)}function i(e,o){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(o.indexOf(r)>=0)continue;n[r]=e[r]}return n}require("iv-viewer/dist/iv-viewer.css");var u=["img","hiResImg","defaultZoom","maxZoom","snapView","refreshOnResize","zoomOnMouseWheel","hasZoomButtons","zoomStep","onLoad","alt"],s=["img","hiResImg","width","height","zoom","defaultZoom","maxZoom","snapView","refreshOnResize","zoomOnMouseWheel","hasZoomButtons","zoomStep","onZoomChange","onLoad"];exports.FullScreenViewer=function(e){var s=e.img,c=e.hiResImg,a=e.defaultZoom,m=void 0===a?100:a,f=e.maxZoom,l=void 0===f?500:f,h=e.snapView,d=void 0===h||h,v=e.refreshOnResize,z=void 0===v||v,g=e.zoomOnMouseWheel,p=void 0===g||g,w=e.hasZoomButtons,O=void 0===w||w,Z=e.zoomStep,R=e.onLoad,y=e.alt,V=void 0===y?"Zoomable Image":y,x=i(e,u),I=o.useRef(null),b=o.useRef(m),S=o.useRef(R);return S.current=R,o.useEffect((function(){return I.current=new r.FullScreenViewer({zoom:b.current,maxZoom:l,snapView:d,refreshOnResize:z,zoomOnMouseWheel:p,hasZoomButtons:O,zoomStep:Z,listeners:{onInit:function(e){S.current&&S.current(e.instance)}}}),function(){I.current&&I.current.destroy()}}),[s,c,l,d,z,p,O,Z]),n.createElement("img",Object.assign({},x,{src:s,onClick:function(e){null==x.onClick||x.onClick(e),I.current&&I.current.show(s,c)},style:t({},x.style,{cursor:"pointer"}),alt:V}))},exports.ImageViewer=function(e){var u=e.img,c=e.hiResImg,a=e.width,m=void 0===a?"100%":a,f=e.height,l=void 0===f?"100%":f,h=e.zoom,d=e.defaultZoom,v=void 0===d?100:d,z=e.maxZoom,g=void 0===z?500:z,p=e.snapView,w=void 0===p||p,O=e.refreshOnResize,Z=void 0===O||O,R=e.zoomOnMouseWheel,y=void 0===R||R,V=e.hasZoomButtons,x=void 0===V||V,I=e.zoomStep,b=e.onZoomChange,S=e.onLoad,M=i(e,s),j=o.useRef(null),B=o.useRef(null),C=o.useRef(v),W=o.useRef(b);W.current=b;var E=o.useRef(S);return E.current=S,o.useEffect((function(){return B.current&&(j.current=new r.ImageViewer(B.current,{zoom:C.current,maxZoom:g,snapView:w,refreshOnResize:Z,zoomOnMouseWheel:y,hasZoomButtons:x,zoomStep:I,listeners:{onInit:function(e){E.current&&E.current(e.instance)},onDestroy:function(){},onZoomChange:function(e){W.current&&W.current(e.zoomValue)}}}),j.current.load(u,c)),function(){j.current&&j.current.destroy()}}),[u,c,g,w,Z,y,x,I]),o.useEffect((function(){h&&h!==C.current&&(C.current=h,j.current&&"function"==typeof j.current.zoom&&j.current.zoom(h))}),[h]),n.createElement("div",Object.assign({},M,{ref:B,style:t({},M.style,{width:m,height:l})}))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e,o=require("react"),n=(e=o)&&"object"==typeof e&&"default"in e?e.default:e,r=require("iv-viewer");function t(){return(t=Object.assign?Object.assign.bind():function(e){for(var o=1;o<arguments.length;o++){var n=arguments[o];for(var r in n)({}).hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e}).apply(null,arguments)}function u(e,o){if(null==e)return{};var n={};for(var r in e)if({}.hasOwnProperty.call(e,r)){if(o.indexOf(r)>=0)continue;n[r]=e[r]}return n}var i=["img","hiResImg","defaultZoom","maxZoom","snapView","refreshOnResize","zoomOnMouseWheel","hasZoomButtons","zoomStep","onLoad","alt"],s=["img","hiResImg","width","height","zoom","defaultZoom","maxZoom","snapView","refreshOnResize","zoomOnMouseWheel","hasZoomButtons","zoomStep","onZoomChange","onLoad"];exports.FullScreenViewer=function(e){var s=e.img,c=e.hiResImg,a=e.defaultZoom,m=void 0===a?100:a,f=e.maxZoom,l=void 0===f?500:f,h=e.snapView,d=void 0===h||h,v=e.refreshOnResize,z=void 0===v||v,g=e.zoomOnMouseWheel,p=void 0===g||g,O=e.hasZoomButtons,Z=void 0===O||O,w=e.zoomStep,R=void 0===w?50:w,y=e.onLoad,V=e.alt,x=void 0===V?"Zoomable Image":V,I=u(e,i),b=o.useRef(null),S=o.useRef(m),M=o.useRef(y);return M.current=y,o.useEffect((function(){return b.current=new r.FullScreenViewer({zoom:S.current,maxZoom:l,snapView:d,refreshOnResize:z,zoomOnMouseWheel:p,hasZoomButtons:Z,zoomStep:R,listeners:{onInit:function(e){M.current&&M.current(e.instance)}}}),function(){b.current&&b.current.destroy()}}),[s,c,l,d,z,p,Z,R]),n.createElement("img",Object.assign({},I,{src:s,onClick:function(e){null==I.onClick||I.onClick(e),b.current&&b.current.show(s,c)},style:t({cursor:"pointer"},I.style),alt:x}))},exports.ImageViewer=function(e){var i=e.img,c=e.hiResImg,a=e.width,m=e.height,f=e.zoom,l=e.defaultZoom,h=void 0===l?100:l,d=e.maxZoom,v=void 0===d?500:d,z=e.snapView,g=void 0===z||z,p=e.refreshOnResize,O=void 0===p||p,Z=e.zoomOnMouseWheel,w=void 0===Z||Z,R=e.hasZoomButtons,y=void 0===R||R,V=e.zoomStep,x=void 0===V?50:V,I=e.onZoomChange,b=e.onLoad,S=u(e,s),M=o.useRef(null),j=o.useRef(null),B=o.useRef(h),C=o.useRef(I);C.current=I;var W=o.useRef(b);return W.current=b,o.useEffect((function(){return j.current&&(M.current=new r.ImageViewer(j.current,{zoom:B.current,maxZoom:v,snapView:g,refreshOnResize:O,zoomOnMouseWheel:w,hasZoomButtons:y,zoomStep:x,listeners:{onInit:function(e){W.current&&W.current(e.instance)},onDestroy:function(){},onZoomChange:function(e){C.current&&C.current(e.zoomValue)}}}),M.current.load(i,c)),function(){M.current&&M.current.destroy()}}),[i,c,v,g,O,w,y,x]),o.useEffect((function(){f&&f!==B.current&&(B.current=f,M.current&&"function"==typeof M.current.zoom&&M.current.zoom(f))}),[f]),n.createElement("div",Object.assign({},S,{ref:j,style:t({},S.style,{width:a,height:m})}))};
 //# sourceMappingURL=react-iv-viewer.cjs.production.min.js.map

dist/react-iv-viewer.esm.js

 import React, { useRef, useEffect } from 'react';
 import { FullScreenViewer as FullScreenViewer$1, ImageViewer as ImageViewer$1 } from 'iv-viewer';
-import 'iv-viewer/dist/iv-viewer.css';
 
@@ -40,3 +39,4 @@ function _extends() {
     hasZoomButtons = _ref$hasZoomButtons === void 0 ? true : _ref$hasZoomButtons,
-    zoomStep = _ref.zoomStep,
+    _ref$zoomStep = _ref.zoomStep,
+    zoomStep = _ref$zoomStep === void 0 ? 50 : _ref$zoomStep,
     onLoad = _ref.onLoad,
@@ -84,5 +84,5 @@ _ref$alt = _ref.alt,
     onClick: handleOnClick,
-    style: _extends({}, rest.style, {
+    style: _extends({
       cursor: 'pointer'
-    }),
+    }, rest.style),
     alt: alt
@@ -96,6 +96,4 @@ }));
     hiResImg = _ref.hiResImg,
-    _ref$width = _ref.width,
-    width = _ref$width === void 0 ? '100%' : _ref$width,
-    _ref$height = _ref.height,
-    height = _ref$height === void 0 ? '100%' : _ref$height,
+    width = _ref.width,
+    height = _ref.height,
     zoom = _ref.zoom,
@@ -114,3 +112,4 @@ _ref$defaultZoom = _ref.defaultZoom,
     hasZoomButtons = _ref$hasZoomButtons === void 0 ? true : _ref$hasZoomButtons,
-    zoomStep = _ref.zoomStep,
+    _ref$zoomStep = _ref.zoomStep,
+    zoomStep = _ref$zoomStep === void 0 ? 50 : _ref$zoomStep,
     onZoomChange = _ref.onZoomChange,
@@ -117,0 +116,0 @@ onLoad = _ref.onLoad,

package.json

 {
   "name": "react-iv-viewer",
-  "version": "0.1.2",
+  "version": "1.0.0",
   "author": "manav",
@@ -28,3 +28,4 @@ "module": "dist/react-iv-viewer.esm.js",
     "start": "tsdx watch",
-    "build": "tsdx build",
+    "build": "tsdx build && yarn build-css",
+    "build-css": "node build-css.cjs",
     "test": "tsdx test --passWithNoTests",
@@ -70,2 +71,3 @@ "lint": "tsdx lint",
     "react-dom": "^18.3.1",
+    "sass": "^1.77.6",
     "size-limit": "^11.1.4",
@@ -78,4 +80,5 @@ "storybook": "^8.1.10",
   "dependencies": {
-    "iv-viewer": "^2.1.1"
+    "iv-viewer": "^2.1.1",
+    "sass": "^1.77.6"
   }
 }

README.md

@@ -20,3 +20,3 @@ # Getting Started
 
-See the many DEMO sections in the documentation.
+See the demo of react-iv-viewer. [Demo](https://s-yadav.github.io/iv-viewer/docs/react-iv-viewer/demo)
 
@@ -26,2 +26,3 @@ ### Install
 using `npm`
+
 ```bash
@@ -32,2 +33,3 @@ npm install react-iv-viewer
 using `yarn`
+
 ```bash
@@ -37,5 +39,15 @@ yarn add react-iv-viewer
 
+#### Import its style
+
+```js
+// Import css
+import 'react-iv-viewer/dist/react-iv-viewer.css';
+```
+
+You can choose to import css file inside your scss/less files.
+
 #### ES6
 
 Image Viewer
+
 ```jsx
@@ -46,4 +58,9 @@ import { ImageViewer } from 'react-iv-viewer';
 Fullscreen Viewer
+
 ```jsx
 import { FullScreenImageViewer } from 'react-iv-viewer';
 ```
+
+### Documentation
+
+[See full documentation of react-iv-viewer](https://s-yadav.github.io/iv-viewer/docs/category/react-iv-viewer)

src/index.ts

 export * from './FullScreenViewer';
 export * from './ImageViewer';

src/types.ts

@@ -0,0 +0,0 @@ import {

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

New author

Supply chain risk

A new npm collaborator published a version of the package for the first time. New collaborators are usually benign additions to a project, but do indicate a change to the security surface area of a package.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Improved metrics

Number of package files

25

increased by4.17%

Number of low quality alerts

2

decreased by-33.33%

Number of lines in readme file

62

increased by37.78%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Total package byte prevSize

4541217

decreased by-0.03%

Dependency count

3

increased by50%

Dev dependency count

22

increased by4.76%

Lines of code

711

decreased by-0.84%

Dependency changes

• + Addedsass@^1.77.6

• + Added@parcel/watcher@2.5.0(transitive)

• + Added@parcel/watcher-android-arm64@2.5.0(transitive)

• + Added@parcel/watcher-darwin-arm64@2.5.0(transitive)

• + Added@parcel/watcher-darwin-x64@2.5.0(transitive)

• + Added@parcel/watcher-freebsd-x64@2.5.0(transitive)

• + Added@parcel/watcher-linux-arm-glibc@2.5.0(transitive)

• + Added@parcel/watcher-linux-arm-musl@2.5.0(transitive)

• + Added@parcel/watcher-linux-arm64-glibc@2.5.0(transitive)

• + Added@parcel/watcher-linux-arm64-musl@2.5.0(transitive)

• + Added@parcel/watcher-linux-x64-glibc@2.5.0(transitive)

• + Added@parcel/watcher-linux-x64-musl@2.5.0(transitive)

• + Added@parcel/watcher-win32-arm64@2.5.0(transitive)

• + Added@parcel/watcher-win32-ia32@2.5.0(transitive)

• + Added@parcel/watcher-win32-x64@2.5.0(transitive)

• + Addedbraces@3.0.3(transitive)

• + Addedchokidar@4.0.1(transitive)

• + Addeddetect-libc@1.0.3(transitive)

• + Addedfill-range@7.1.1(transitive)

• + Addedimmutable@5.0.3(transitive)

• + Addedis-extglob@2.1.1(transitive)

• + Addedis-glob@4.0.3(transitive)

• + Addedis-number@7.0.0(transitive)

• + Addedmicromatch@4.0.8(transitive)

• + Addednode-addon-api@7.1.1(transitive)

• + Addedpicomatch@2.3.1(transitive)

• + Addedreaddirp@4.0.2(transitive)

• + Addedsass@1.81.0(transitive)

• + Addedsource-map-js@1.2.1(transitive)

• + Addedto-regex-range@5.0.1(transitive)