react-fast-marquee - npm Package Compare versions

Comparing version 1.1.4 to 1.2.0

dist/components/Marquee.d.ts

@@ -76,4 +76,10 @@ import React from "react";
     children?: React.ReactNode;
+    /**
+     * The number of times the marquee should loop, 0 is equivalent to infinite
+     * Type: number
+     * Default: 0
+     */
+    loop?: number;
 }
 declare const Marquee: React.FC<MarqueeProps>;
 export default Marquee;

dist/index.js

@@ -53,12 +53,12 @@
 
-___$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}");
+___$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) var(--iteration-count);\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}");
 
 var Marquee = function (_a) {
     var _b, _c, _d, _e;
-    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;
+    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, _s = _a.loop, loop = _s === void 0 ? 0 : _s;
     // React Hooks
-    var _s = React.useState(0), containerWidth = _s[0], setContainerWidth = _s[1];
-    var _t = React.useState(0), marqueeWidth = _t[0], setMarqueeWidth = _t[1];
-    var _u = React.useState(0), duration = _u[0], setDuration = _u[1];
-    var _v = React.useState(false), isMounted = _v[0], setIsMounted = _v[1];
+    var _t = React.useState(0), containerWidth = _t[0], setContainerWidth = _t[1];
+    var _u = React.useState(0), marqueeWidth = _u[0], setMarqueeWidth = _u[1];
+    var _v = React.useState(0), duration = _v[0], setDuration = _v[1];
+    var _w = React.useState(false), isMounted = _w[0], setIsMounted = _w[1];
     var containerRef = React.useRef(null);
@@ -104,2 +104,3 @@ var marqueeRef = React.useRef(null);
                 _d["--delay"] = delay + "s",
+                _d["--iteration-count"] = !!loop ? "" + loop : "infinite",
                 _d), className: "marquee" }, children),
@@ -111,2 +112,3 @@ React__default['default'].createElement("div", { style: (_e = {},
                 _e["--delay"] = delay + "s",
+                _e["--iteration-count"] = !!loop ? "" + loop : "infinite",
                 _e), className: "marquee" }, children)))));
@@ -113,0 +115,0 @@ };

package.json

 {
   "name": "react-fast-marquee",
-  "version": "1.1.4",
+  "version": "1.2.0",
   "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",

README.md

@@ -86,1 +86,2 @@ # React Fast Marquee
 | `children`      | `ReactNode`                 | `null`            | The children rendered inside the marquee                 |
+| `loop`          | `number`                    | `0`               | The number of times the marquee should loop, 0 is equivalent to infinite         |

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

Total package byte prevSize

25550

increased by4.15%

Lines of code

193

increased by4.32%

Number of lines in readme file

87

increased by1.16%

No dependency changes