react-scroll-parallax - npm Package Compare versions

Comparing version 2.2.0 to 2.3.0

cjs/components/ParallaxBanner.js

@@ -16,2 +16,4 @@ "use strict";
 
+function _extends() { _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; }; return _extends.apply(this, arguments); }
+
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }
@@ -47,11 +49,26 @@
   }, layers.map(function (_ref2, i) {
-    var image = _ref2.image,
-        amount = _ref2.amount,
+    var amount = _ref2.amount,
         layerChildren = _ref2.children,
         _ref2$expanded = _ref2.expanded,
-        expanded = _ref2$expanded === void 0 ? true : _ref2$expanded;
-    // if this is an expanded layer overwrite the top/bottom styles with negative margins
+        expanded = _ref2$expanded === void 0 ? true : _ref2$expanded,
+        image = _ref2.image,
+        _ref2$props = _ref2.props,
+        props = _ref2$props === void 0 ? {} : _ref2$props;
+    // save props to be merged
+    var layerStyle = props.style || {};
+    var layerClass = props.className || ''; // remove from pass through props
+
+    delete props.style;
+    delete props.className;
+    var layerClassMerged = "parallax-banner-layer-".concat(i).concat(layerClass ? " ".concat(layerClass) : ''); // if this is an expanded layer overwrite the top/bottom styles with negative margins
+
     var expandedStyle = expanded ? {
       top: Math.abs(amount) * 100 * -1 + '%',
       bottom: Math.abs(amount) * 100 * -1 + '%'
+    } : {}; // optional image styles
+
+    var imageStyle = image ? {
+      backgroundImage: "url(".concat(image, ")"),
+      backgroundPosition: 'center',
+      backgroundSize: 'cover'
     } : {};
@@ -64,13 +81,6 @@ return _react.default.createElement(_Parallax.default, {
       disabled: disabled
-    }, image ? _react.default.createElement("div", {
-      className: "parallax-banner-layer-".concat(i),
-      style: _objectSpread({
-        backgroundImage: "url(".concat(image, ")"),
-        backgroundPosition: 'center',
-        backgroundSize: 'cover'
-      }, absoluteStyle, {}, expandedStyle)
-    }) : _react.default.createElement("div", {
-      className: "parallax-banner-layer-".concat(i),
-      style: _objectSpread({}, absoluteStyle, {}, expandedStyle)
-    }, layerChildren));
+    }, _react.default.createElement("div", _extends({
+      className: layerClassMerged,
+      style: _objectSpread({}, imageStyle, {}, absoluteStyle, {}, expandedStyle, {}, layerStyle)
+    }, props), layerChildren));
   }), children);
@@ -90,3 +100,4 @@ };
     expanded: _propTypes.default.bool,
-    image: _propTypes.default.string
+    image: _propTypes.default.string,
+    props: _propTypes.default.object
   })),
@@ -93,0 +104,0 @@ style: _propTypes.default.object

package.json

 {
   "name": "react-scroll-parallax",
-  "version": "2.2.0",
+  "version": "2.3.0",
   "description": "React components to create parallax scroll effects for banners, images or any other DOM elements.",
@@ -5,0 +5,0 @@ "repository": {

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

Improved metrics

Total package byte prevSize

77477

increased by0.88%

Lines of code

1311

increased by0.61%

No dependency changes