react-fast-marquee - npm Package Compare versions

Comparing version 1.1.2 to 1.1.3

dist/index.js

@@ -53,3 +53,3 @@
 
-___$insertStyle(".marquee-container {\n  overflow-x: hidden !important;\n  display: flex !important;\n  flex-direction: row !important;\n  position: relative;\n  height: 100%;\n  width: 100%;\n}\n.marquee-container:hover div {\n  animation-play-state: var(--pause-on-hover);\n}\n.marquee-container:active div {\n  animation-play-state: var(--pause-on-click);\n}\n\n.overlay {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.overlay::before, .overlay::after {\n  background: linear-gradient(to right, var(--gradient-color));\n  content: \"\";\n  height: 100%;\n  position: absolute;\n  width: var(--gradient-width);\n  z-index: 2;\n}\n.overlay::after {\n  right: 0;\n  top: 0;\n  transform: rotateZ(180deg);\n}\n.overlay::before {\n  left: 0;\n  top: 0;\n}\n\n.marquee {\n  display: flex;\n  flex-direction: row;\n  margin-right: var(--margin-right);\n  animation: scroll var(--duration) linear var(--delay) infinite;\n  animation-play-state: var(--play);\n  animation-delay: var(--delay);\n  animation-direction: var(--direction);\n}\n@keyframes scroll {\n  0% {\n    transform: translateX(0);\n  }\n  100% {\n    transform: translateX(calc(-100% - var(--margin-right)));\n  }\n}");
+___$insertStyle(".marquee-container {\n  overflow-x: hidden !important;\n  display: flex !important;\n  flex-direction: row !important;\n  position: relative;\n  width: 100%;\n}\n.marquee-container:hover div {\n  animation-play-state: var(--pause-on-hover);\n}\n.marquee-container:active div {\n  animation-play-state: var(--pause-on-click);\n}\n\n.overlay {\n  position: absolute;\n  width: 100%;\n  height: 100%;\n}\n.overlay::before, .overlay::after {\n  background: linear-gradient(to right, var(--gradient-color));\n  content: \"\";\n  height: 100%;\n  position: absolute;\n  width: var(--gradient-width);\n  z-index: 2;\n}\n.overlay::after {\n  right: 0;\n  top: 0;\n  transform: rotateZ(180deg);\n}\n.overlay::before {\n  left: 0;\n  top: 0;\n}\n\n.marquee {\n  flex: 0 0 auto;\n  min-width: 100%;\n  z-index: 1;\n  display: flex;\n  flex-direction: row;\n  align-items: center;\n  animation: scroll var(--duration) linear var(--delay) infinite;\n  animation-play-state: var(--play);\n  animation-delay: var(--delay);\n  animation-direction: var(--direction);\n}\n@keyframes scroll {\n  0% {\n    transform: translateX(0%);\n  }\n  100% {\n    transform: translateX(-100%);\n  }\n}");
 
@@ -59,3 +59,3 @@ var Marquee = function (_a) {
     var _f = _a.style, style = _f === void 0 ? {} : _f, _g = _a.className, className = _g === void 0 ? "" : _g, _h = _a.play, play = _h === void 0 ? true : _h, _j = _a.pauseOnHover, pauseOnHover = _j === void 0 ? false : _j, _k = _a.pauseOnClick, pauseOnClick = _k === void 0 ? false : _k, _l = _a.direction, direction = _l === void 0 ? "left" : _l, _m = _a.speed, speed = _m === void 0 ? 20 : _m, _o = _a.delay, delay = _o === void 0 ? 0 : _o, _p = _a.gradient, gradient = _p === void 0 ? true : _p, _q = _a.gradientColor, gradientColor = _q === void 0 ? [255, 255, 255] : _q, _r = _a.gradientWidth, gradientWidth = _r === void 0 ? 200 : _r, children = _a.children;
-    /* React Hooks */
+    // React Hooks
     var _s = React.useState(0), containerWidth = _s[0], setContainerWidth = _s[1];
@@ -67,7 +67,4 @@ var _t = React.useState(0), marqueeWidth = _t[0], setMarqueeWidth = _t[1];
     var marqueeRef = React.useRef(null);
-    React.useEffect(function () {
-        setIsMounted(true);
-    }, []);
-    React.useEffect(function () {
-        /* Find width of container and width of marquee */
+    var calculateWidth = function () {
+        // Find width of container and width of marquee
         if (marqueeRef.current && containerRef.current) {
@@ -83,3 +80,14 @@ setContainerWidth(containerRef.current.getBoundingClientRect().width);
         }
+    };
+    React.useEffect(function () {
+        calculateWidth();
+        // Rerender on window resize
+        window.addEventListener("resize", calculateWidth);
+        return function () {
+            window.removeEventListener("resize", calculateWidth);
+        };
     });
+    React.useEffect(function () {
+        setIsMounted(true);
+    }, []);
     // Gradient color in an unfinished rgba format
@@ -99,5 +107,2 @@ var rgbaGradientColor = "rgba(" + gradientColor[0] + ", " + gradientColor[1] + ", " + gradientColor[2];
                 _d["--delay"] = delay + "s",
-                _d["--margin-right"] = (marqueeWidth < containerWidth
-                    ? containerWidth - marqueeWidth
-                    : 0) + "px",
                 _d), className: "marquee" }, children),
@@ -109,5 +114,2 @@ React__default['default'].createElement("div", { style: (_e = {},
                 _e["--delay"] = delay + "s",
-                _e["--margin-right"] = (marqueeWidth < containerWidth
-                    ? containerWidth - marqueeWidth
-                    : 0) + "px",
                 _e), className: "marquee" }, children)))));
@@ -114,0 +116,0 @@ };

package.json

 {
   "name": "react-fast-marquee",
-  "version": "1.1.2",
+  "version": "1.1.3",
   "description": "A lightweight React component that utilizes the power of CSS animations to create silky smooth marquees.",
@@ -5,0 +5,0 @@ "main": "dist/index.js",

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

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

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Lines of code

185

increased by1.09%

Worsened metrics

Total package byte prevSize

24513

decreased by-0.71%

No dependency changes