react-modal-image - npm Package Compare versions

Comparing version 1.0.6 to 1.0.7

es/index.js

@@ -9,8 +9,5 @@ function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
 
-import ModalImage from "./ModalImage";
+import { previewStyles } from "./styles";
+import Lightbox from "./Lightbox";
 
-var previewStyles = {
-  cursor: "pointer"
-};
-
 var _default = function (_Component) {
@@ -40,2 +37,3 @@ _inherits(_default, _Component);
         preview = _props.preview,
+        previewSrcSet = _props.previewSrcSet,
         fullscreen = _props.fullscreen,
@@ -54,5 +52,6 @@ download = _props.download,
         src: preview,
+        srcSet: previewSrcSet,
         alt: alt
       }),
-      modalOpen && React.createElement(ModalImage, {
+      modalOpen && React.createElement(Lightbox, {
         fullscreen: fullscreen,
@@ -59,0 +58,0 @@ download: download,

es/styles.js

@@ -0,1 +1,7 @@
+export var previewStyles = {
+  cursor: "pointer",
+  maxWidth: "100%",
+  maxHeight: "100%"
+};
+
 export var modalStyles = {
@@ -2,0 +8,0 @@ position: "fixed",

lib/index.js

@@ -10,6 +10,8 @@ "use strict";
 
-var _ModalImage = require("./ModalImage");
+var _styles = require("./styles");
 
-var _ModalImage2 = _interopRequireDefault(_ModalImage);
+var _Lightbox = require("./Lightbox");
 
+var _Lightbox2 = _interopRequireDefault(_Lightbox);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -23,6 +25,2 @@
 
-var previewStyles = {
-  cursor: "pointer"
-};
-
 var _default = function (_Component) {
@@ -52,2 +50,3 @@ _inherits(_default, _Component);
         preview = _props.preview,
+        previewSrcSet = _props.previewSrcSet,
         fullscreen = _props.fullscreen,
@@ -63,8 +62,9 @@ download = _props.download,
       _react2.default.createElement("img", {
-        style: previewStyles,
+        style: _styles.previewStyles,
         onClick: this.toggleModal,
         src: preview,
+        srcSet: previewSrcSet,
         alt: alt
       }),
-      modalOpen && _react2.default.createElement(_ModalImage2.default, {
+      modalOpen && _react2.default.createElement(_Lightbox2.default, {
         fullscreen: fullscreen,
@@ -71,0 +71,0 @@ download: download,

lib/styles.js

 "use strict";
 
 exports.__esModule = true;
+var previewStyles = exports.previewStyles = {
+  cursor: "pointer",
+  maxWidth: "100%",
+  maxHeight: "100%"
+};
+
 var modalStyles = exports.modalStyles = {
@@ -5,0 +11,0 @@ position: "fixed",

package.json

 {
   "name": "react-modal-image",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Lightweight Lightbox React Component",
@@ -27,4 +27,3 @@ "main": "lib/index.js",
     "react": "^16.2.0",
-    "react-dom": "^16.2.0",
-    "react-live": "^1.9.2"
+    "react-dom": "^16.2.0"
   },
@@ -31,0 +30,0 @@ "repository": {

README.md

@@ -7,3 +7,3 @@ # react-modal-image
 
-This is a tiny React component providing modal image Lightbox.
+A tiny an a simple React component providing modal image Lightbox.
 
@@ -22,3 +22,3 @@ [DEMO](https://aautio.github.io/react-modal-image/)
 
-You need to provide a polyfill for `Object.assign()` in your app to support old Internet Explorers.
+You need to bring your own `Object.assign()` polyfill if you use old Internet Explorers.
 
@@ -32,2 +32,3 @@ ## API
   preview={urlToTinyImageFile}
+  previewSrcSet={srcSetDefToTinyImageFile}
   fullscreen={urlToLargeImageFile}
@@ -39,8 +40,9 @@ download={urlToHugeImageFile}
 
-| Prop         | Type     | Description                                                      |
-| ------------ | -------- | ---------------------------------------------------------------- |
-| `alt`        | `String` | alt text for the preview img and the header in Lightbox.         |
-| `preview`    | `URL`    | The small preview img. Click to open Lightbox.                   |
-| `fullscreen` | `URL`    | Image shown in Lightbox.                                         |
-| `download`   | `URL`    | Download the image by clicking the icon in the top right corner. |
+| 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. |
 
@@ -47,0 +49,0 @@ [build-badge]: https://img.shields.io/travis/aautio/react-modal-image/master.png?style=flat-square

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

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

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

Improved metrics

Total package byte prevSize

32201

increased by1.78%

Dev dependency count

4

decreased by-20%

Lines of code

777

increased by1.3%

Number of lines in readme file

51

increased by4.08%

Worsened metrics

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes