react-responsive-picture - npm Package Compare versions

Comparing version 1.0.6 to 2.0.0

es/components/FullsizePicture.js

 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -12,4 +14,26 @@
 import PropTypes from "prop-types";
-import { css } from "glamor";
+import glamorous from "glamorous";
 
+var Wrapper = glamorous.div(function () {
+    return [{
+        overflow: "hidden",
+        width: "100%",
+        height: "100%",
+        position: "relative"
+    }];
+});
+
+Wrapper.displayName = "Wrapper";
+var PictureWrapper = glamorous.div(function () {
+    return [{
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0
+    }];
+});
+
+PictureWrapper.displayName = "PictureWrapper";
+
 var FullSizePicture = function (_React$PureComponent) {
@@ -24,51 +48,36 @@ _inherits(FullSizePicture, _React$PureComponent);
 
-    FullSizePicture.prototype.getStyles = function getStyles() {
-        var styles = {
-            overflow: "hidden",
-            width: "100%",
-            height: "100%",
-            position: "relative"
-        };
-
-        return css(styles, this.props.style);
-    };
-
-    FullSizePicture.prototype.getImageWrapperStyles = function getImageWrapperStyles() {
-        return css({
+    FullSizePicture.prototype.getImageStyles = function getImageStyles(propsStyle) {
+        return [{
             position: "absolute",
-            top: "-50%",
-            width: "200%",
-            left: "-50%",
-            height: "200%"
-        });
-    };
-
-    FullSizePicture.prototype.getImageStyles = function getImageStyles() {
-        var styles = {
-            position: "absolute",
-            top: 0,
-            left: 0,
-            bottom: 0,
-            right: 0,
+            top: "50%",
+            left: "50%",
             margin: "auto",
-            minWidth: "50%",
-            minHeight: "50%"
-        };
-
-        return css(styles, this.props.imageStyle);
+            height: "auto",
+            minWidth: "100%",
+            minHeight: "100%",
+            maxWidth: "none",
+            maxHeight: "none",
+            transform: "translate3d(-50%, -50%, 0)"
+        }, propsStyle];
     };
 
     FullSizePicture.prototype.render = function render() {
+        var _props = this.props,
+            className = _props.className,
+            pictureClassName = _props.pictureClassName,
+            style = _props.style,
+            pictureCSS = _props.pictureCSS,
+            css = _props.css,
+            rest = _objectWithoutProperties(_props, ["className", "pictureClassName", "style", "pictureCSS", "css"]);
+
         return React.createElement(
-            "div",
-            _extends({ className: this.props.className }, this.getStyles()),
+            Wrapper,
+            { className: className, css: css, style: style },
             React.createElement(
-                "div",
-                this.getImageWrapperStyles(),
-                React.createElement(Picture, {
-                    alt: this.props.alt,
-                    src: this.props.src,
-                    sources: this.props.sources,
-                    style: this.getImageStyles()
-                })
+                PictureWrapper,
+                null,
+                React.createElement(Picture, _extends({
+                    className: pictureClassName,
+                    css: this.getImageStyles(pictureCSS)
+                }, rest))
             )
@@ -83,9 +92,11 @@ );
     className: PropTypes.string,
+    pictureClassName: PropTypes.string,
     alt: PropTypes.string,
     sources: PropTypes.array,
     src: PropTypes.string,
-    style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
-    imageStyle: PropTypes.oneOfType([PropTypes.array, PropTypes.object])
+    style: PropTypes.object,
+    css: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
+    pictureCSS: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string])
 };
 
 export default FullSizePicture;

es/components/Picture.js

 var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -11,5 +13,9 @@
 import PropTypes from "prop-types";
-import { css } from "glamor";
 import picturefill from "picturefill";
+import glamorous from "glamorous";
 
+var Img = glamorous.img();
+
+Img.displayName = "Img";
+
 var Picture = function (_React$PureComponent) {
@@ -28,6 +34,2 @@ _inherits(Picture, _React$PureComponent);
 
-    Picture.prototype.getImageStyles = function getImageStyles() {
-        return css(this.props.style);
-    };
-
     Picture.prototype.renderSources = function renderSources() {
@@ -67,17 +69,28 @@ var ieVersion = document.documentMode ? document.documentMode : -1;
 
-    Picture.prototype.renderImage = function renderImage() {
-        var skipSizes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    Picture.prototype.renderImage = function renderImage(props) {
+        var skipSizes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
+        var alt = props.alt,
+            src = props.src,
+            sizes = props.sizes,
+            rest = _objectWithoutProperties(props, ["alt", "src", "sizes"]);
+
         // Adds sizes props if sources isn't defined
-        var sizesProp = skipSizes ? null : { sizes: this.props.sizes };
-        return React.createElement("img", _extends({
-            alt: this.props.alt,
-            srcSet: this.props.src,
-            className: this.props.className,
+
+
+        var sizesProp = skipSizes ? null : { sizes: sizes };
+
+        return React.createElement(Img, _extends({
+            alt: alt,
+            srcSet: src,
             "data-no-retina": true
-        }, sizesProp, this.getImageStyles()));
+        }, sizesProp, rest));
     };
 
     Picture.prototype.render = function render() {
-        if (this.props.sources != null) {
+        var _props = this.props,
+            sources = _props.sources,
+            rest = _objectWithoutProperties(_props, ["sources"]);
+
+        if (sources != null) {
             return React.createElement(
@@ -87,7 +100,7 @@ "picture",
                 this.renderSources(),
-                this.renderImage(true)
+                this.renderImage(rest, true)
             );
         }
 
-        return this.renderImage();
+        return this.renderImage(rest);
     };
@@ -101,3 +114,4 @@
     src: PropTypes.string.isRequired,
-    style: PropTypes.oneOfType([PropTypes.array, PropTypes.object]),
+    style: PropTypes.object,
+    css: PropTypes.oneOfType([PropTypes.array, PropTypes.object, PropTypes.string]),
     alt: PropTypes.string,
@@ -104,0 +118,0 @@ className: PropTypes.string,

lib/components/FullsizePicture.js

@@ -21,6 +21,10 @@ "use strict";
 
-var _glamor = require("glamor");
+var _glamorous = require("glamorous");
 
+var _glamorous2 = _interopRequireDefault(_glamorous);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -32,2 +36,24 @@
 
+var Wrapper = _glamorous2.default.div(function () {
+    return [{
+        overflow: "hidden",
+        width: "100%",
+        height: "100%",
+        position: "relative"
+    }];
+});
+
+Wrapper.displayName = "Wrapper";
+var PictureWrapper = _glamorous2.default.div(function () {
+    return [{
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0
+    }];
+});
+
+PictureWrapper.displayName = "PictureWrapper";
+
 var FullSizePicture = function (_React$PureComponent) {
@@ -42,51 +68,36 @@ _inherits(FullSizePicture, _React$PureComponent);
 
-    FullSizePicture.prototype.getStyles = function getStyles() {
-        var styles = {
-            overflow: "hidden",
-            width: "100%",
-            height: "100%",
-            position: "relative"
-        };
-
-        return (0, _glamor.css)(styles, this.props.style);
-    };
-
-    FullSizePicture.prototype.getImageWrapperStyles = function getImageWrapperStyles() {
-        return (0, _glamor.css)({
+    FullSizePicture.prototype.getImageStyles = function getImageStyles(propsStyle) {
+        return [{
             position: "absolute",
-            top: "-50%",
-            width: "200%",
-            left: "-50%",
-            height: "200%"
-        });
-    };
-
-    FullSizePicture.prototype.getImageStyles = function getImageStyles() {
-        var styles = {
-            position: "absolute",
-            top: 0,
-            left: 0,
-            bottom: 0,
-            right: 0,
+            top: "50%",
+            left: "50%",
             margin: "auto",
-            minWidth: "50%",
-            minHeight: "50%"
-        };
-
-        return (0, _glamor.css)(styles, this.props.imageStyle);
+            height: "auto",
+            minWidth: "100%",
+            minHeight: "100%",
+            maxWidth: "none",
+            maxHeight: "none",
+            transform: "translate3d(-50%, -50%, 0)"
+        }, propsStyle];
     };
 
     FullSizePicture.prototype.render = function render() {
+        var _props = this.props,
+            className = _props.className,
+            pictureClassName = _props.pictureClassName,
+            style = _props.style,
+            pictureCSS = _props.pictureCSS,
+            css = _props.css,
+            rest = _objectWithoutProperties(_props, ["className", "pictureClassName", "style", "pictureCSS", "css"]);
+
         return _react2.default.createElement(
-            "div",
-            _extends({ className: this.props.className }, this.getStyles()),
+            Wrapper,
+            { className: className, css: css, style: style },
             _react2.default.createElement(
-                "div",
-                this.getImageWrapperStyles(),
-                _react2.default.createElement(_Picture2.default, {
-                    alt: this.props.alt,
-                    src: this.props.src,
-                    sources: this.props.sources,
-                    style: this.getImageStyles()
-                })
+                PictureWrapper,
+                null,
+                _react2.default.createElement(_Picture2.default, _extends({
+                    className: pictureClassName,
+                    css: this.getImageStyles(pictureCSS)
+                }, rest))
             )
@@ -101,9 +112,11 @@ );
     className: _propTypes2.default.string,
+    pictureClassName: _propTypes2.default.string,
     alt: _propTypes2.default.string,
     sources: _propTypes2.default.array,
     src: _propTypes2.default.string,
-    style: _propTypes2.default.oneOfType([_propTypes2.default.array, _propTypes2.default.object]),
-    imageStyle: _propTypes2.default.oneOfType([_propTypes2.default.array, _propTypes2.default.object])
+    style: _propTypes2.default.object,
+    css: _propTypes2.default.oneOfType([_propTypes2.default.array, _propTypes2.default.object, _propTypes2.default.string]),
+    pictureCSS: _propTypes2.default.oneOfType([_propTypes2.default.array, _propTypes2.default.object, _propTypes2.default.string])
 };
 
 exports.default = FullSizePicture;

lib/components/Picture.js

@@ -17,4 +17,2 @@ "use strict";
 
-var _glamor = require("glamor");
-
 var _picturefill = require("picturefill");
@@ -24,4 +22,10 @@
 
+var _glamorous = require("glamorous");
+
+var _glamorous2 = _interopRequireDefault(_glamorous);
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
+function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
+
 function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
@@ -33,2 +37,6 @@
 
+var Img = _glamorous2.default.img();
+
+Img.displayName = "Img";
+
 var Picture = function (_React$PureComponent) {
@@ -47,6 +55,2 @@ _inherits(Picture, _React$PureComponent);
 
-    Picture.prototype.getImageStyles = function getImageStyles() {
-        return (0, _glamor.css)(this.props.style);
-    };
-
     Picture.prototype.renderSources = function renderSources() {
@@ -86,17 +90,28 @@ var ieVersion = document.documentMode ? document.documentMode : -1;
 
-    Picture.prototype.renderImage = function renderImage() {
-        var skipSizes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
+    Picture.prototype.renderImage = function renderImage(props) {
+        var skipSizes = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
 
+        var alt = props.alt,
+            src = props.src,
+            sizes = props.sizes,
+            rest = _objectWithoutProperties(props, ["alt", "src", "sizes"]);
+
         // Adds sizes props if sources isn't defined
-        var sizesProp = skipSizes ? null : { sizes: this.props.sizes };
-        return _react2.default.createElement("img", _extends({
-            alt: this.props.alt,
-            srcSet: this.props.src,
-            className: this.props.className,
+
+
+        var sizesProp = skipSizes ? null : { sizes: sizes };
+
+        return _react2.default.createElement(Img, _extends({
+            alt: alt,
+            srcSet: src,
             "data-no-retina": true
-        }, sizesProp, this.getImageStyles()));
+        }, sizesProp, rest));
     };
 
     Picture.prototype.render = function render() {
-        if (this.props.sources != null) {
+        var _props = this.props,
+            sources = _props.sources,
+            rest = _objectWithoutProperties(_props, ["sources"]);
+
+        if (sources != null) {
             return _react2.default.createElement(
@@ -106,7 +121,7 @@ "picture",
                 this.renderSources(),
-                this.renderImage(true)
+                this.renderImage(rest, true)
             );
         }
 
-        return this.renderImage();
+        return this.renderImage(rest);
     };
@@ -120,3 +135,4 @@
     src: _propTypes2.default.string.isRequired,
-    style: _propTypes2.default.oneOfType([_propTypes2.default.array, _propTypes2.default.object]),
+    style: _propTypes2.default.object,
+    css: _propTypes2.default.oneOfType([_propTypes2.default.array, _propTypes2.default.object, _propTypes2.default.string]),
     alt: _propTypes2.default.string,
@@ -123,0 +139,0 @@ className: _propTypes2.default.string,

package.json

 {
   "name": "react-responsive-picture",
-  "version": "1.0.6",
+  "version": "2.0.0",
   "description": "A future-proof responsive image component that supports latest Picture specification",
@@ -14,3 +14,3 @@ "main": "./lib/index.js",
     "clean": "rimraf lib dist es",
-    "dev": "yarn run clean && babel src -d lib --watch",
+    "dev": "yarn run clean && cross-env BABEL_ENV=commonjs babel src -d lib --watch",
     "lint": "eslint src/ --ext .js,.jsx",
@@ -49,19 +49,23 @@ "prepublish": "yarn run clean && yarn run build",
     "babel-cli": "^6.11.4",
-    "babel-core": "^6.11.4",
-    "babel-eslint": "^6.1.2",
-    "babel-loader": "^6.4.1",
+    "babel-core": "^6.25.0",
+    "babel-eslint": "^7.2.3",
+    "babel-loader": "^7.1.0",
+    "babel-plugin-glamorous-displayname": "^1.1.3",
     "babel-plugin-transform-es2015-modules-commonjs": "^6.24.0",
-    "babel-preset-env": "^1.3.2",
+    "babel-plugin-transform-object-rest-spread": "^6.23.0",
+    "babel-preset-env": "^1.5.2",
     "babel-preset-react": "^6.23.0",
-    "cross-env": "^4.0.0",
-    "eslint": "^3.5.0",
+    "cross-env": "^5.0.1",
+    "eslint": "^4.0.0",
     "eslint-config-edited": "^1.0.0",
-    "eslint-plugin-import": "^1.15.0",
-    "eslint-plugin-react": "^6.10.2",
-    "np": "^2.13.1",
-    "react": "^15.4.2",
+    "eslint-plugin-import": "^2.3.0",
+    "eslint-plugin-react": "^7.1.0",
+    "glamor": "^2.20.25",
+    "np": "^2.16.0",
+    "react": "^15.6.1",
     "rimraf": "^2.4.3",
-    "webpack": "^2.3.3"
+    "webpack": "^3.0.0"
   },
   "peerDependencies": {
+    "glamor": "^2.20.25",
     "react": "^15.0.1",
@@ -71,3 +75,3 @@ "react-dom": "^15.0.1"
   "dependencies": {
-    "glamor": "^2.20.24",
+    "glamorous": "^3.23.3",
     "picturefill": "^3.0.2",
@@ -74,0 +78,0 @@ "prop-types": "^15.5.10"

README.md

@@ -9,4 +9,10 @@ ## react-responsive-picture
 
-`npm install react-responsive-picture` || `yarn add react-responsive-picture`
+`npm install react-responsive-picture` or `yarn add react-responsive-picture`
 
+#### Dependencies
+
+`react-responsive-picture` requires `glamor` installed as peer dependency since version `2.0.0` so you need to add it (in case you're not using it in your project) by running:
+
+`npm install glamor` or `yarn add glamor`
+
 ## How to use
@@ -51,4 +57,6 @@
 | className | string | | Any additional CSS classes you might want to use to style the image |
-| style | object \|\| array |  | Any additional styles you might want to send to the wrapper. Uses glamor to process it so you can send either objects or arrays. |
+| css | object \|\| array \|\| string |  | Any additional styles you might want to send to the wrapper. Uses [glamorous](https://github.com/paypal/glamorous) to process it so you can send an object, an array or even `glamor` generated string classes. |
 
+**Note:** Before version `2.0.0` the `style` prop was parsed by `glamor` so it wasn't having the same behaviour as applying the `style` prop to any other React component. For that reason, the recommended prop to override the styles is now `css`, which will be parsed by `glamorous` and applied to the component. The `style` prop will be treated as inline styles so it still works, but you can't have the nice features from `glamor` like hover states or media queries so be very careful about using it.
+
 ## Examples
@@ -156,2 +164,9 @@
 
+`FullsizePicture` accepts the same props as `Picture` plus a few more for styling.
+
+| Prop | Type | Default | Definition |
+| --- | --- | --- | --- |
+| pictureClassName | string | | Any additional CSS classes you might want to use to style the inner `Picture` component |
+| pictureCSS | object \|\| array \|\| string |  | Any additional styles you might want to send to the inner `Picture` component |
+
 ## Contributing
@@ -158,0 +173,0 @@

src/components/FullsizePicture.jsx

 import Picture from "./Picture";
 import React from "react";
 import PropTypes from "prop-types";
-import { css } from "glamor";
+import glamorous from "glamorous";
 
-class FullSizePicture extends React.PureComponent {
-    getStyles() {
-        const styles = {
-            overflow: "hidden",
-            width: "100%",
-            height: "100%",
-            position: "relative",
-        };
+const Wrapper = glamorous.div(() => [
+    {
+        overflow: "hidden",
+        width: "100%",
+        height: "100%",
+        position: "relative",
+    },
+]);
 
-        return css(
-            styles,
-            this.props.style,
-        );
-    }
+const PictureWrapper = glamorous.div(() => [
+    {
+        position: "absolute",
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+    },
+]);
 
-    getImageWrapperStyles() {
-        return css({
-            position: "absolute",
-            top: "-50%",
-            width: "200%",
-            left: "-50%",
-            height: "200%",
-        });
+class FullSizePicture extends React.PureComponent {
+    getImageStyles(propsStyle) {
+        return [
+            {
+                position: "absolute",
+                top: "50%",
+                left: "50%",
+                margin: "auto",
+                height: "auto",
+                minWidth: "100%",
+                minHeight: "100%",
+                maxWidth: "none",
+                maxHeight: "none",
+                transform: "translate3d(-50%, -50%, 0)",
+            },
+            propsStyle,
+        ];
     }
 
-    getImageStyles() {
-        const styles = {
-            position: "absolute",
-            top: 0,
-            left: 0,
-            bottom: 0,
-            right: 0,
-            margin: "auto",
-            minWidth: "50%",
-            minHeight: "50%",
-        };
-
-        return css(
-            styles,
-            this.props.imageStyle,
-        );
-    }
-
     render() {
+        const {
+            className,
+            pictureClassName,
+            style,
+            pictureCSS,
+            css,
+            ...rest
+        } = this.props;
         return (
-            <div className={this.props.className} {...this.getStyles()}>
-                <div {...this.getImageWrapperStyles()}>
+            <Wrapper className={className} css={css} style={style}>
+                <PictureWrapper>
                     <Picture
-                        alt={this.props.alt}
-                        src={this.props.src}
-                        sources={this.props.sources}
-                        style={this.getImageStyles()}
+                        className={pictureClassName}
+                        css={this.getImageStyles(pictureCSS)}
+                        {...rest}
                     />
-                </div>
-            </div>
+                </PictureWrapper>
+            </Wrapper>
         );
@@ -67,12 +69,16 @@ }
     className: PropTypes.string,
+    pictureClassName: PropTypes.string,
     alt: PropTypes.string,
     sources: PropTypes.array,
     src: PropTypes.string,
-    style: PropTypes.oneOfType([
+    style: PropTypes.object,
+    css: PropTypes.oneOfType([
         PropTypes.array,
         PropTypes.object,
+        PropTypes.string,
     ]),
-    imageStyle: PropTypes.oneOfType([
+    pictureCSS: PropTypes.oneOfType([
         PropTypes.array,
         PropTypes.object,
+        PropTypes.string,
     ]),
@@ -79,0 +85,0 @@ };

src/components/Picture.jsx

 import React from "react";
 import PropTypes from "prop-types";
-import { css } from "glamor";
 import picturefill from "picturefill";
+import glamorous from "glamorous";
 
+const Img = glamorous.img();
+
 class Picture extends React.PureComponent {
@@ -11,6 +13,2 @@ componentDidMount() {
 
-    getImageStyles() {
-        return css(this.props.style);
-    }
-
     renderSources() {
@@ -51,13 +49,15 @@ const ieVersion = document.documentMode ? document.documentMode : -1;
 
-    renderImage(skipSizes = false) {
+    renderImage(props, skipSizes = false) {
+        const { alt, src, sizes, ...rest } = props;
+
         // Adds sizes props if sources isn't defined
-        const sizesProp = skipSizes ? null : { sizes: this.props.sizes };
+        const sizesProp = skipSizes ? null : { sizes };
+
         return (
-            <img
-                alt={this.props.alt}
-                srcSet={this.props.src}
-                className={this.props.className}
+            <Img
+                alt={alt}
+                srcSet={src}
                 data-no-retina={true}
                 {...sizesProp}
-                {...this.getImageStyles()}
+                {...rest}
             />
@@ -68,7 +68,8 @@ );
     render() {
-        if (this.props.sources != null) {
+        const { sources, ...rest } = this.props;
+        if (sources != null) {
             return (
                 <picture>
                     {this.renderSources()}
-                    {this.renderImage(true)}
+                    {this.renderImage(rest, true)}
                 </picture>
@@ -78,3 +79,3 @@ );
 
-        return this.renderImage();
+        return this.renderImage(rest);
     }
@@ -86,5 +87,7 @@ }
     src: PropTypes.string.isRequired,
-    style: PropTypes.oneOfType([
+    style: PropTypes.object,
+    css: PropTypes.oneOfType([
         PropTypes.array,
         PropTypes.object,
+        PropTypes.string,
     ]),
@@ -91,0 +94,0 @@ alt: PropTypes.string,

New alerts

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Fixed alerts

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

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

357409

increased by50.27%

Lines of code

6854

increased by35.13%

Number of lines in readme file

177

increased by9.26%

Number of medium supply chain risk alerts

2

decreased by-33.33%

Worsened metrics

Dependency count

6

increased by20%

Dev dependency count

19

increased by18.75%

Dependency changes

• + Addedglamorous@^3.23.3

• + Addedbrcast@2.0.2(transitive)

• + Addedfast-memoize@2.5.2(transitive)

• + Addedglamorous@3.25.0(transitive)

• + Addedhtml-element-attributes@1.3.1(transitive)

• + Addedhtml-tag-names@1.1.5(transitive)

• + Addedreact-html-attributes@1.4.6(transitive)

• + Addedsvg-tag-names@1.1.2(transitive)

• - Removedglamor@^2.20.24