react-fast-marquee - npm Package Compare versions

Comparing version 1.2.1 to 1.3.0

dist/components/Marquee.d.ts

@@ -53,2 +53,8 @@ import React from "react";
     /**
+     * The number of times the marquee should loop, 0 is equivalent to infinite
+     * Type: number
+     * Default: 0
+     */
+    loop?: number;
+    /**
      * Whether to show the gradient or not
@@ -72,2 +78,14 @@ * Type: boolean
     /**
+     * A callback for when the marquee finishes scrolling and stops. Only calls if loop is non-zero.
+     * Type: Function
+     * Default: null
+     */
+    onFinish?: () => void;
+    /**
+     * A callback for when the marquee finishes a loop. Does not call if maximum loops are reached (use onFinish instead).
+     * Type: Function
+     * Default: null
+     */
+    onCycleComplete?: () => void;
+    /**
      * The children rendered inside the marquee
@@ -78,10 +96,4 @@ * Type: ReactNode
     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

 
 
 function ___$insertStyle(css) {
-  if (!css) {
-    return;
-  }
-  if (typeof window === 'undefined') {
-    return;
-  }
-
-  var style = document.createElement('style');
-
-  style.setAttribute('type', 'text/css');
-  style.innerHTML = css;
-  document.head.appendChild(style);
-  return css;
+    if (!css || typeof window === 'undefined') {
+        return;
+    }
+    const style = document.createElement('style');
+    style.setAttribute('type', 'text/css');
+    style.innerHTML = css;
+    document.head.appendChild(style);
+    return css;
 }
@@ -57,3 +52,3 @@
     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, _s = _a.loop, loop = _s === void 0 ? 0 : _s;
+    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.loop, loop = _p === void 0 ? 0 : _p, _q = _a.gradient, gradient = _q === void 0 ? true : _q, _r = _a.gradientColor, gradientColor = _r === void 0 ? [255, 255, 255] : _r, _s = _a.gradientWidth, gradientWidth = _s === void 0 ? 200 : _s, onFinish = _a.onFinish, onCycleComplete = _a.onCycleComplete, children = _a.children;
     // React Hooks
@@ -86,3 +81,3 @@ var _t = React.useState(0), containerWidth = _t[0], setContainerWidth = _t[1];
         };
-    });
+    }, []);
     React.useEffect(function () {
@@ -106,3 +101,3 @@ setIsMounted(true);
                 _d["--iteration-count"] = !!loop ? "" + loop : "infinite",
-                _d), className: "marquee" }, children),
+                _d), className: "marquee", onAnimationIteration: onCycleComplete, onAnimationEnd: onFinish }, children),
         React__default['default'].createElement("div", { style: (_e = {},
@@ -109,0 +104,0 @@ _e["--play"] = play ? "running" : "paused",

package.json

 {
   "name": "react-fast-marquee",
-  "version": "1.2.1",
+  "version": "1.3.0",
   "description": "A lightweight React component that utilizes the power of CSS animations to create silky smooth marquees.",
@@ -53,2 +53,3 @@ "main": "dist/index.js",
     "slider",
+    "ticker",
     "horizontal-scrolling-carousels"
@@ -55,0 +56,0 @@ ],

README.md

@@ -85,4 +85,6 @@ # React Fast Marquee
 | `gradientColor` | `Array<number>` of length 3 | `[255, 255, 255]` | The rgb color of the gradient as an array of length 3    |
-| `gradientWidth` | `number or string`          | `200`             | The width of the gradient on either side                 |
+| `gradientWidth` | `number` or `string`        | `200`             | The width of the gradient on either side                 |
+| `onFinish` | `Function` | `null` | A callback for when the marquee finishes scrolling and stops. Only calls if loop is non-zero.    |
+| `onCycleComplete` | `Function`        | `null`             | A callback for when the marquee finishes a loop. Does not call if maximum loops are reached (use onFinish instead).                 |
 | `children`      | `ReactNode`                 | `null`            | The children rendered inside the marquee                 |
 

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

27040

increased by5.83%

Lines of code

202

increased by4.66%

Number of lines in readme file

90

increased by2.27%

No dependency changes