react-modal-image - npm Package Compare versions

Comparing version 1.0.7 to 2.0.0

es/icons.js

@@ -17,5 +17,4 @@ /*
     },
-    React.createElement("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }),
-    React.createElement("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
-    React.createElement("path", { d: "M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z" })
+    React.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }),
+    React.createElement("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" })
   );
@@ -34,4 +33,4 @@ };
     },
-    React.createElement("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
-    React.createElement("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z" })
+    React.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }),
+    React.createElement("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" })
   );
@@ -38,0 +37,0 @@ };

es/index.js

@@ -9,5 +9,7 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-import { previewStyles } from "./styles";
+import { smallImage } from "./styles";
 import Lightbox from "./Lightbox";
 
+export { default as Lightbox } from "./Lightbox";
+
 var _default = function (_Component) {
@@ -36,6 +38,6 @@ _inherits(_default, _Component);
     var _props = this.props,
-        preview = _props.preview,
-        previewSrcSet = _props.previewSrcSet,
-        fullscreen = _props.fullscreen,
-        download = _props.download,
+        small = _props.small,
+        smallSrcSet = _props.smallSrcSet,
+        medium = _props.medium,
+        large = _props.large,
         alt = _props.alt;
@@ -49,11 +51,11 @@ var modalOpen = this.state.modalOpen;
       React.createElement("img", {
-        style: previewStyles,
+        style: smallImage,
         onClick: this.toggleModal,
-        src: preview,
-        srcSet: previewSrcSet,
+        src: small,
+        srcSet: smallSrcSet,
         alt: alt
       }),
       modalOpen && React.createElement(Lightbox, {
-        fullscreen: fullscreen,
-        download: download,
+        medium: medium,
+        large: large,
         alt: alt,
@@ -60,0 +62,0 @@ onClose: this.toggleModal

es/Lightbox.js

@@ -9,3 +9,3 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-import { modalStyles, modalContentStyles, spinnerStyles, imageStyles, spacerStyles, iconStyles, iconWithMarginRightStyles, iconMenuStyles, captionStyles, headerStyles } from "./styles";
+import * as style from "./styles";
 
@@ -27,8 +27,11 @@ import { ZoomInIcon, ZoomOutIcon, DownloadIcon, CloseIcon, SpinnerIcon } from "./icons";
     return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = {
-      loading: true,
+      mediumImgLoading: true,
+      largeImgLoading: true,
       move: { x: 0, y: 0 },
       moveStart: undefined,
-      zoom: 1
-    }, _this.hidePlaceholder = function () {
-      _this.setState({ loading: false });
+      zoomed: false
+    }, _this.mediumLoaded = function () {
+      _this.setState({ mediumImgLoading: false });
+    }, _this.largeLoaded = function () {
+      _this.setState({ largeImgLoading: false });
     }, _this.handleKeyDown = function (event) {
@@ -42,3 +45,3 @@ // ESC or ENTER closes the modal
 
-      if (point.target.id !== "react-modal-fullscreen-img") {
+      if (point.target.id !== "react-modal-image-img") {
         // the img was not a target of the coordinates
@@ -68,2 +71,7 @@ return;
 
+      if (!_this.state.zoomed) {
+        // do not allow drag'n'drop if zoom has not been applied
+        return;
+      }
+
       _this.setState(function (prevState) {
@@ -80,2 +88,7 @@ return {
 
+      if (!_this.state.zoomed) {
+        // do not allow drag'n'drop if zoom has not been applied
+        return;
+      }
+
       if (event.touches && event.touches.length > 1) {
@@ -108,12 +121,9 @@ // more than one finger, ignored
       });
-    }, _this.handleZoomIn = function (event) {
+    }, _this.toggleZoom = function (event) {
       event.preventDefault();
       _this.setState(function (prevState) {
-        return { zoom: prevState.zoom * 1.5 };
-      });
-    }, _this.handleZoomOut = function (event) {
-      event.preventDefault();
-      _this.setState(function (prevState) {
         return {
-          zoom: prevState.zoom / 1.5 < 1 ? 1 : prevState.zoom / 1.5
+          zoomed: !prevState.zoomed,
+          // reset position if zoomed out
+          move: prevState.zoomed ? { x: 0, y: 0 } : prevState.move
         };
@@ -136,19 +146,16 @@ });
     var _props = this.props,
-        fullscreen = _props.fullscreen,
-        download = _props.download,
+        medium = _props.medium,
+        large = _props.large,
         alt = _props.alt,
         onClose = _props.onClose;
     var _state = this.state,
-        loading = _state.loading,
-        zoom = _state.zoom,
-        move = _state.move;
+        mediumImgLoading = _state.mediumImgLoading,
+        largeImgLoading = _state.largeImgLoading,
+        move = _state.move,
+        zoomed = _state.zoomed;
 
 
-    var imgTransform = {
-      transform: "translate3d(-50%, -50%, 0) translate3d(" + move.x + "px, " + move.y + "px, 0) " + (zoom > 1 ? "scale3d(" + zoom + ", " + zoom + ", 1)" : "")
-    };
-
     return React.createElement(
       "div",
-      { style: modalStyles },
+      { style: style.modal },
       React.createElement(
@@ -163,31 +170,51 @@ "div",
           onTouchMove: this.handleMouseMoveOrTouchMove,
+          onDoubleClick: this.toggleZoom,
           ref: function ref(el) {
             _this2.contentEl = el;
           },
-          style: modalContentStyles
+          style: style.modalContent
         },
-        loading && React.createElement(
+        !zoomed && React.createElement(
           "div",
-          { style: spinnerStyles },
-          React.createElement(SpinnerIcon, null)
+          null,
+          mediumImgLoading && React.createElement(
+            "div",
+            { style: style.spinner },
+            React.createElement(SpinnerIcon, null)
+          ),
+          React.createElement("img", {
+            onContextMenu: function onContextMenu(event) {
+              event.preventDefault();
+            },
+            id: "react-modal-image-img",
+            style: style.mediumImage,
+            src: medium,
+            onLoad: this.mediumLoaded
+          })
         ),
-        React.createElement("img", {
-          onContextMenu: function onContextMenu(event) {
-            event.preventDefault();
-          },
-          id: "react-modal-fullscreen-img",
-          style: Object.assign({}, imageStyles, imgTransform),
-          src: fullscreen,
-          onLoad: this.hidePlaceholder
-        })
+        zoomed && React.createElement(
+          "div",
+          null,
+          largeImgLoading && React.createElement(
+            "div",
+            { style: style.spinner },
+            React.createElement(SpinnerIcon, null)
+          ),
+          React.createElement("img", {
+            id: "react-modal-image-img",
+            style: style.largeImage(move.x, move.y),
+            src: large,
+            onLoad: this.largeLoaded
+          })
+        )
       ),
       React.createElement(
         "div",
-        { style: headerStyles },
+        { style: style.header },
         React.createElement(
           "span",
-          { style: iconMenuStyles },
-          download && React.createElement(
+          { style: style.iconMenu },
+          React.createElement(
             "a",
-            { href: download, style: iconWithMarginRightStyles, download: true },
+            { href: large, style: style.icon, download: true },
             React.createElement(DownloadIcon, null)
@@ -197,17 +224,8 @@ ),
             "a",
-            { href: "", style: iconStyles, onClick: this.handleZoomIn },
-            React.createElement(ZoomInIcon, null)
+            { href: "", style: style.icon, onClick: this.toggleZoom },
+            zoomed ? React.createElement(ZoomOutIcon, null) : React.createElement(ZoomInIcon, null)
           ),
           React.createElement(
             "a",
-            {
-              href: "",
-              style: iconWithMarginRightStyles,
-              onClick: this.handleZoomOut
-            },
-            React.createElement(ZoomOutIcon, null)
-          ),
-          React.createElement(
-            "a",
-            { style: iconStyles, onClick: onClose },
+            { style: style.icon, onClick: onClose },
             React.createElement(CloseIcon, null)
@@ -218,3 +236,3 @@ )
           "span",
-          { style: captionStyles },
+          { style: style.caption },
           alt
@@ -221,0 +239,0 @@ )

es/styles.js

@@ -1,2 +0,2 @@
-export var previewStyles = {
+export var smallImage = {
   cursor: "pointer",
@@ -7,3 +7,3 @@ maxWidth: "100%",
 
-export var modalStyles = {
+export var modal = {
   position: "fixed",
@@ -20,3 +20,3 @@ zIndex: 1000,
 
-export var modalContentStyles = {
+export var modalContent = {
   textAlign: "center",
@@ -29,3 +29,3 @@ position: "relative",
 
-export var spinnerStyles = {
+export var spinner = {
   position: "absolute",
@@ -37,12 +37,22 @@ top: "50%",
 
-export var imageStyles = {
+export var mediumImage = {
   position: "absolute",
   top: "50%",
   left: "50%",
+  transform: "translate3d(-50%, -50%, 0)",
   maxWidth: "98%",
-  maxHeight: "98%",
-  cursor: "move"
+  maxHeight: "98%"
 };
 
-export var iconStyles = {
+export var largeImage = function largeImage(x, y) {
+  return {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate3d(-50%, -50%, 0) translate3d(" + x + "px, " + y + "px, 0)",
+    cursor: "move"
+  };
+};
+
+export var icon = {
   fontSize: "40px",
@@ -54,2 +64,3 @@ cursor: "pointer",
   padding: "0px 5px 0px 5px",
+  marginLeft: "10px",
   color: "white",
@@ -59,7 +70,3 @@ backgroundColor: "rgba(0, 0, 0, 0)"
 
-export var iconWithMarginRightStyles = Object.assign({}, iconStyles, {
-  marginRight: "10px"
-});
-
-export var iconMenuStyles = {
+export var iconMenu = {
   display: "inline-block",
@@ -69,3 +76,3 @@ float: "right"
 
-export var captionStyles = {
+export var caption = {
   display: "inline-block",
@@ -78,3 +85,3 @@ color: "white",
 
-export var headerStyles = {
+export var header = {
   position: "absolute",
@@ -81,0 +88,0 @@ top: 0,

lib/icons.js

@@ -22,5 +22,4 @@ "use strict";
     },
-    _react2.default.createElement("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z" }),
-    _react2.default.createElement("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
-    _react2.default.createElement("path", { d: "M12 10h-2v2H9v-2H7V9h2V7h1v2h2v1z" })
+    _react2.default.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }),
+    _react2.default.createElement("path", { d: "M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z" })
   );
@@ -41,4 +40,4 @@ }; /*
     },
-    _react2.default.createElement("path", { d: "M0 0h24v24H0V0z", fill: "none" }),
-    _react2.default.createElement("path", { d: "M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14zM7 9h5v1H7z" })
+    _react2.default.createElement("path", { d: "M0 0h24v24H0z", fill: "none" }),
+    _react2.default.createElement("path", { d: "M5 16h3v3h2v-5H5v2zm3-8H5v2h5V5H8v3zm6 11h2v-3h3v-2h-5v5zm2-11V5h-2v5h5V8h-3z" })
   );
@@ -45,0 +44,0 @@ };

lib/index.js

 "use strict";
 
 exports.__esModule = true;
-exports.default = undefined;
+exports.default = exports.Lightbox = undefined;
 
+var _Lightbox = require("./Lightbox");
+
+Object.defineProperty(exports, "Lightbox", {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Lightbox).default;
+  }
+});
+
 var _react = require("react");
@@ -12,4 +21,2 @@
 
-var _Lightbox = require("./Lightbox");
-
 var _Lightbox2 = _interopRequireDefault(_Lightbox);
@@ -48,6 +55,6 @@
     var _props = this.props,
-        preview = _props.preview,
-        previewSrcSet = _props.previewSrcSet,
-        fullscreen = _props.fullscreen,
-        download = _props.download,
+        small = _props.small,
+        smallSrcSet = _props.smallSrcSet,
+        medium = _props.medium,
+        large = _props.large,
         alt = _props.alt;
@@ -61,11 +68,11 @@ var modalOpen = this.state.modalOpen;
       _react2.default.createElement("img", {
-        style: _styles.previewStyles,
+        style: _styles.smallImage,
         onClick: this.toggleModal,
-        src: preview,
-        srcSet: previewSrcSet,
+        src: small,
+        srcSet: smallSrcSet,
         alt: alt
       }),
       modalOpen && _react2.default.createElement(_Lightbox2.default, {
-        fullscreen: fullscreen,
-        download: download,
+        medium: medium,
+        large: large,
         alt: alt,
@@ -80,3 +87,2 @@ onClose: this.toggleModal
 
-exports.default = _default;
-module.exports = exports["default"];
+exports.default = _default;

lib/Lightbox.js

@@ -12,4 +12,8 @@ "use strict";
 
+var style = _interopRequireWildcard(_styles);
+
 var _icons = require("./icons");
 
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -36,8 +40,11 @@
     return _ret = (_temp = (_this = _possibleConstructorReturn(this, _Component.call.apply(_Component, [this].concat(args))), _this), _this.state = {
-      loading: true,
+      mediumImgLoading: true,
+      largeImgLoading: true,
       move: { x: 0, y: 0 },
       moveStart: undefined,
-      zoom: 1
-    }, _this.hidePlaceholder = function () {
-      _this.setState({ loading: false });
+      zoomed: false
+    }, _this.mediumLoaded = function () {
+      _this.setState({ mediumImgLoading: false });
+    }, _this.largeLoaded = function () {
+      _this.setState({ largeImgLoading: false });
     }, _this.handleKeyDown = function (event) {
@@ -51,3 +58,3 @@ // ESC or ENTER closes the modal
 
-      if (point.target.id !== "react-modal-fullscreen-img") {
+      if (point.target.id !== "react-modal-image-img") {
         // the img was not a target of the coordinates
@@ -77,2 +84,7 @@ return;
 
+      if (!_this.state.zoomed) {
+        // do not allow drag'n'drop if zoom has not been applied
+        return;
+      }
+
       _this.setState(function (prevState) {
@@ -89,2 +101,7 @@ return {
 
+      if (!_this.state.zoomed) {
+        // do not allow drag'n'drop if zoom has not been applied
+        return;
+      }
+
       if (event.touches && event.touches.length > 1) {
@@ -117,12 +134,9 @@ // more than one finger, ignored
       });
-    }, _this.handleZoomIn = function (event) {
+    }, _this.toggleZoom = function (event) {
       event.preventDefault();
       _this.setState(function (prevState) {
-        return { zoom: prevState.zoom * 1.5 };
-      });
-    }, _this.handleZoomOut = function (event) {
-      event.preventDefault();
-      _this.setState(function (prevState) {
         return {
-          zoom: prevState.zoom / 1.5 < 1 ? 1 : prevState.zoom / 1.5
+          zoomed: !prevState.zoomed,
+          // reset position if zoomed out
+          move: prevState.zoomed ? { x: 0, y: 0 } : prevState.move
         };
@@ -145,19 +159,16 @@ });
     var _props = this.props,
-        fullscreen = _props.fullscreen,
-        download = _props.download,
+        medium = _props.medium,
+        large = _props.large,
         alt = _props.alt,
         onClose = _props.onClose;
     var _state = this.state,
-        loading = _state.loading,
-        zoom = _state.zoom,
-        move = _state.move;
+        mediumImgLoading = _state.mediumImgLoading,
+        largeImgLoading = _state.largeImgLoading,
+        move = _state.move,
+        zoomed = _state.zoomed;
 
 
-    var imgTransform = {
-      transform: "translate3d(-50%, -50%, 0) translate3d(" + move.x + "px, " + move.y + "px, 0) " + (zoom > 1 ? "scale3d(" + zoom + ", " + zoom + ", 1)" : "")
-    };
-
     return _react2.default.createElement(
       "div",
-      { style: _styles.modalStyles },
+      { style: style.modal },
       _react2.default.createElement(
@@ -172,31 +183,51 @@ "div",
           onTouchMove: this.handleMouseMoveOrTouchMove,
+          onDoubleClick: this.toggleZoom,
           ref: function ref(el) {
             _this2.contentEl = el;
           },
-          style: _styles.modalContentStyles
+          style: style.modalContent
         },
-        loading && _react2.default.createElement(
+        !zoomed && _react2.default.createElement(
           "div",
-          { style: _styles.spinnerStyles },
-          _react2.default.createElement(_icons.SpinnerIcon, null)
+          null,
+          mediumImgLoading && _react2.default.createElement(
+            "div",
+            { style: style.spinner },
+            _react2.default.createElement(_icons.SpinnerIcon, null)
+          ),
+          _react2.default.createElement("img", {
+            onContextMenu: function onContextMenu(event) {
+              event.preventDefault();
+            },
+            id: "react-modal-image-img",
+            style: style.mediumImage,
+            src: medium,
+            onLoad: this.mediumLoaded
+          })
         ),
-        _react2.default.createElement("img", {
-          onContextMenu: function onContextMenu(event) {
-            event.preventDefault();
-          },
-          id: "react-modal-fullscreen-img",
-          style: Object.assign({}, _styles.imageStyles, imgTransform),
-          src: fullscreen,
-          onLoad: this.hidePlaceholder
-        })
+        zoomed && _react2.default.createElement(
+          "div",
+          null,
+          largeImgLoading && _react2.default.createElement(
+            "div",
+            { style: style.spinner },
+            _react2.default.createElement(_icons.SpinnerIcon, null)
+          ),
+          _react2.default.createElement("img", {
+            id: "react-modal-image-img",
+            style: style.largeImage(move.x, move.y),
+            src: large,
+            onLoad: this.largeLoaded
+          })
+        )
       ),
       _react2.default.createElement(
         "div",
-        { style: _styles.headerStyles },
+        { style: style.header },
         _react2.default.createElement(
           "span",
-          { style: _styles.iconMenuStyles },
-          download && _react2.default.createElement(
+          { style: style.iconMenu },
+          _react2.default.createElement(
             "a",
-            { href: download, style: _styles.iconWithMarginRightStyles, download: true },
+            { href: large, style: style.icon, download: true },
             _react2.default.createElement(_icons.DownloadIcon, null)
@@ -206,17 +237,8 @@ ),
             "a",
-            { href: "", style: _styles.iconStyles, onClick: this.handleZoomIn },
-            _react2.default.createElement(_icons.ZoomInIcon, null)
+            { href: "", style: style.icon, onClick: this.toggleZoom },
+            zoomed ? _react2.default.createElement(_icons.ZoomOutIcon, null) : _react2.default.createElement(_icons.ZoomInIcon, null)
           ),
           _react2.default.createElement(
             "a",
-            {
-              href: "",
-              style: _styles.iconWithMarginRightStyles,
-              onClick: this.handleZoomOut
-            },
-            _react2.default.createElement(_icons.ZoomOutIcon, null)
-          ),
-          _react2.default.createElement(
-            "a",
-            { style: _styles.iconStyles, onClick: onClose },
+            { style: style.icon, onClick: onClose },
             _react2.default.createElement(_icons.CloseIcon, null)
@@ -227,3 +249,3 @@ )
           "span",
-          { style: _styles.captionStyles },
+          { style: style.caption },
           alt
@@ -230,0 +252,0 @@ )

lib/styles.js

 "use strict";
 
 exports.__esModule = true;
-var previewStyles = exports.previewStyles = {
+var smallImage = exports.smallImage = {
   cursor: "pointer",
@@ -10,3 +10,3 @@ maxWidth: "100%",
 
-var modalStyles = exports.modalStyles = {
+var modal = exports.modal = {
   position: "fixed",
@@ -23,3 +23,3 @@ zIndex: 1000,
 
-var modalContentStyles = exports.modalContentStyles = {
+var modalContent = exports.modalContent = {
   textAlign: "center",
@@ -32,3 +32,3 @@ position: "relative",
 
-var spinnerStyles = exports.spinnerStyles = {
+var spinner = exports.spinner = {
   position: "absolute",
@@ -40,12 +40,22 @@ top: "50%",
 
-var imageStyles = exports.imageStyles = {
+var mediumImage = exports.mediumImage = {
   position: "absolute",
   top: "50%",
   left: "50%",
+  transform: "translate3d(-50%, -50%, 0)",
   maxWidth: "98%",
-  maxHeight: "98%",
-  cursor: "move"
+  maxHeight: "98%"
 };
 
-var iconStyles = exports.iconStyles = {
+var largeImage = exports.largeImage = function largeImage(x, y) {
+  return {
+    position: "absolute",
+    top: "50%",
+    left: "50%",
+    transform: "translate3d(-50%, -50%, 0) translate3d(" + x + "px, " + y + "px, 0)",
+    cursor: "move"
+  };
+};
+
+var icon = exports.icon = {
   fontSize: "40px",
@@ -57,2 +67,3 @@ cursor: "pointer",
   padding: "0px 5px 0px 5px",
+  marginLeft: "10px",
   color: "white",
@@ -62,7 +73,3 @@ backgroundColor: "rgba(0, 0, 0, 0)"
 
-var iconWithMarginRightStyles = exports.iconWithMarginRightStyles = Object.assign({}, iconStyles, {
-  marginRight: "10px"
-});
-
-var iconMenuStyles = exports.iconMenuStyles = {
+var iconMenu = exports.iconMenu = {
   display: "inline-block",
@@ -72,3 +79,3 @@ float: "right"
 
-var captionStyles = exports.captionStyles = {
+var caption = exports.caption = {
   display: "inline-block",
@@ -81,3 +88,3 @@ color: "white",
 
-var headerStyles = exports.headerStyles = {
+var header = exports.header = {
   position: "absolute",
@@ -84,0 +91,0 @@ top: 0,

package.json

 {
   "name": "react-modal-image",
-  "version": "1.0.7",
+  "version": "2.0.0",
   "description": "Lightweight Lightbox React Component",
@@ -5,0 +5,0 @@ "main": "lib/index.js",

README.md

@@ -11,2 +11,6 @@ # react-modal-image
 
+## Usage
+
+You'll provide 3 images, a small, medium size and a large one. The component will display the small one by default and open a Lightbox for the medium & large ones if clicked.
+
 ## Features
@@ -22,5 +26,5 @@
 
-You need to bring your own `Object.assign()` polyfill if you use old Internet Explorers.
+You need to bring your own `Set` polyfill if you use old Internet Explorers.
 
-## API
+## Simple API
 
@@ -31,6 +35,6 @@ ```js
 <ModalImage
-  preview={urlToTinyImageFile}
-  previewSrcSet={srcSetDefToTinyImageFile}
-  fullscreen={urlToLargeImageFile}
-  download={urlToHugeImageFile}
+  small={urlToTinyImageFile}
+  smallSrcSet={srcSetDefToTinyImageFile}
+  medium={urlToLargeImageFile}
+  large={urlToHugeImageFile}
   alt="Hello World!"
@@ -40,10 +44,43 @@ />
 
-| Prop            | Type     |          | Description                                                      |
-| --------------- | -------- | -------- | ---------------------------------------------------------------- |
-| `alt`           | `String` | Optional | alt text for the preview img and the header in Lightbox.         |
-| `preview`       | `URL`    | Required | `src` for the small preview img.                                 |
-| `previewSrcSet` | `String` | Optional | `srcSet` for the small preview imgs.                             |
-| `fullscreen`    | `URL`    | Required | Image shown in Lightbox.                                         |
-| `download`      | `URL`    | Optional | Download the image by clicking the icon in the top right corner. |
+| Prop          | Type     | Description                                            |
+| ------------- | -------- | ------------------------------------------------------ |
+| `alt`         | `String` | alt text for the small img and the header in Lightbox. |
+| `small`       | `URL`    | `src` for the small small img.                         |
+| `smallSrcSet` | `String` | `srcSet` for the small small imgs.                     |
+| `medium`      | `URL`    | Image shown in Lightbox.                               |
+| `large`       | `URL`    | Image shown when zoomed in Lightbox. Downloadable.     |
 
+## Lightbox-only API
+
+You can also choose to import only the Lightbox.
+
+To use the Lightbox only, you'll need to handle the open state by yourself:
+
+```js
+import { Lightbox } from "react-modal-image";
+
+// ...
+
+const closeLightbox = () => {
+  this.state.open = true;
+};
+
+// ...
+
+{
+  this.state.open && (
+    <Lightbox
+      medium={urlToLargeImageFile}
+      large={urlToHugeImageFile}
+      alt="Hello World!"
+      onClose={this.closeLightbox}
+    />
+  );
+}
+```
+
+| Prop      | Type       | Description                                             |
+| --------- | ---------- | ------------------------------------------------------- |
+| `onClose` | `function` | Will be invoked when the Lightbox requests to be closed |
+
 [build-badge]: https://img.shields.io/travis/aautio/react-modal-image/master.png?style=flat-square
@@ -50,0 +87,0 @@ [build]: https://travis-ci.org/aautio/react-modal-image

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

33536

increased by4.15%

Lines of code

831

increased by6.95%

Number of lines in readme file

88

increased by72.55%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes