react-fast-marquee - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0

dist/components/Marquee.d.ts

@@ -1,4 +0,4 @@
-import { ReactNode, CSSProperties, FC } from "react";
+import { ReactNode, CSSProperties, FC, RefAttributes } from "react";
 import "./Marquee.scss";
-interface MarqueeProps {
+declare type MarqueeProps = {
     /**
@@ -42,6 +42,6 @@ * @description Inline style for the container div
      * @description The direction the marquee is sliding
-     * @type {"left" | "right"}
+     * @type {"left" | "right" | "up" | "down"}
      * @default "left"
      */
-    direction?: "left" | "right";
+    direction?: "left" | "right" | "up" | "down";
     /**
@@ -101,4 +101,4 @@ * @description Speed calculated as pixels/second
     children?: ReactNode;
-}
+} & RefAttributes<HTMLDivElement>;
 declare const Marquee: FC<MarqueeProps>;
 export default Marquee;

dist/index.js

@@ -22,10 +22,5 @@
 
-___$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: var(--min-width);\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}\n\n.children-container {\n  flex: 0 0 auto;\n  min-width: auto;\n}");
+___$insertStyle(".marquee-container {\n  overflow-x: hidden !important;\n  display: flex !important;\n  flex-direction: row !important;\n  position: relative;\n  width: var(--width);\n  transform: var(--transform);\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: var(--min-width);\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}\n\n.initial-child-container {\n  flex: 0 0 auto;\n  display: flex;\n  min-width: auto;\n  flex-direction: row;\n}\n\n.child {\n  transform: var(--transform);\n}");
 
-const multiplyChildren = (multiplier, children) => {
-    return [
-        ...Array(Number.isFinite(multiplier) && multiplier >= 0 ? multiplier : 0),
-    ].map((_, i) => React__default["default"].createElement(React.Fragment, { key: i }, children));
-};
-const Marquee = ({ style = {}, className = "", autoFill = true, play = true, pauseOnHover = false, pauseOnClick = false, direction = "left", speed = 100, delay = 0, loop = 0, gradient = false, gradientColor = [255, 255, 255], gradientWidth = 200, onFinish, onCycleComplete, children, }) => {
+const Marquee = React.forwardRef(function Marquee({ style = {}, className = "", autoFill = true, play = true, pauseOnHover = false, pauseOnClick = false, direction = "left", speed = 100, delay = 0, loop = 0, gradient = false, gradientColor = [255, 255, 255], gradientWidth = 200, onFinish, onCycleComplete, children, }, ref) {
     // React Hooks
@@ -36,3 +31,4 @@ const [containerWidth, setContainerWidth] = React.useState(0);
     const [isMounted, setIsMounted] = React.useState(false);
-    const containerRef = React.useRef(null);
+    const rootRef = React.useRef(null);
+    const containerRef = ref || rootRef;
     const marqueeRef = React.useRef(null);
@@ -42,4 +38,11 @@ // Calculate width of container and marquee and set multiplier
         if (marqueeRef.current && containerRef.current) {
-            const containerWidth = containerRef.current.getBoundingClientRect().width;
-            const marqueeWidth = marqueeRef.current.getBoundingClientRect().width;
+            const containerRect = containerRef.current.getBoundingClientRect();
+            const marqueeRect = marqueeRef.current.getBoundingClientRect();
+            let containerWidth = containerRect.width;
+            let marqueeWidth = marqueeRect.width;
+            // Swap width and height if direction is up or down
+            if (direction === "up" || direction === "down") {
+                containerWidth = containerRect.height;
+                marqueeWidth = marqueeRect.height;
+            }
             if (autoFill && containerWidth && marqueeWidth) {
@@ -56,3 +59,3 @@ setMultiplier(marqueeWidth < containerWidth
         }
-    }, [autoFill, marqueeRef]);
+    }, [autoFill, containerRef, direction]);
     // Calculate width and multiplier on mount and on window resize
@@ -63,4 +66,5 @@ React.useEffect(() => {
         calculateWidth();
-        if (marqueeRef.current) {
+        if (marqueeRef.current && containerRef.current) {
             const resizeObserver = new ResizeObserver(() => calculateWidth());
+            resizeObserver.observe(containerRef.current);
             resizeObserver.observe(marqueeRef.current);
@@ -73,3 +77,3 @@ return () => {
         }
-    }, [calculateWidth, isMounted]);
+    }, [calculateWidth, containerRef, isMounted]);
     // Recalculate width when children change
@@ -97,3 +101,7 @@ React.useEffect(() => {
             ? "paused"
-            : "running" })), [style, play, pauseOnHover, pauseOnClick]);
+            : "running", ["--width"]: direction === "up" || direction === "down" ? `100vh` : "100%", ["--transform"]: direction === "up"
+            ? "rotate(-90deg)"
+            : direction === "down"
+                ? "rotate(90deg)"
+                : "none" })), [style, play, pauseOnHover, pauseOnClick, direction]);
     const gradientStyle = React.useMemo(() => ({
@@ -113,11 +121,28 @@ ["--gradient-color"]: `${rgbaGradientColor}, 1), ${rgbaGradientColor}, 0)`,
     }), [play, direction, duration, delay, loop, autoFill]);
-    return (React__default["default"].createElement(React.Fragment, null, !isMounted ? null : (React__default["default"].createElement("div", { ref: containerRef, style: containerStyle, className: className + " marquee-container" },
-        gradient && React__default["default"].createElement("div", { style: gradientStyle, className: "overlay" }),
-        React__default["default"].createElement("div", { className: "marquee", style: marqueeStyle, onAnimationIteration: onCycleComplete, onAnimationEnd: onFinish },
-            React__default["default"].createElement("div", { className: "children-container", ref: marqueeRef }, children),
-            multiplyChildren(multiplier - 1, children)),
-        React__default["default"].createElement("div", { className: "marquee", style: marqueeStyle }, multiplyChildren(multiplier, children))))));
-};
+    const childStyle = React.useMemo(() => ({
+        ["--transform"]: direction === "up"
+            ? "rotate(90deg)"
+            : direction === "down"
+                ? "rotate(-90deg)"
+                : "none",
+    }), [direction]);
+    // Render {multiplier} number of children
+    const multiplyChildren = React.useCallback((multiplier) => {
+        return [
+            ...Array(Number.isFinite(multiplier) && multiplier >= 0 ? multiplier : 0),
+        ].map((_, i) => (React__default['default'].createElement(React.Fragment, { key: i }, React.Children.map(children, (child) => {
+            return (React__default['default'].createElement("div", { style: childStyle, className: "child" }, child));
+        }))));
+    }, [childStyle, children]);
+    return !isMounted ? null : (React__default['default'].createElement("div", { ref: containerRef, style: containerStyle, className: "marquee-container " + className },
+        gradient && React__default['default'].createElement("div", { style: gradientStyle, className: "overlay" }),
+        React__default['default'].createElement("div", { className: "marquee", style: marqueeStyle, onAnimationIteration: onCycleComplete, onAnimationEnd: onFinish },
+            React__default['default'].createElement("div", { className: "initial-child-container", ref: marqueeRef }, React.Children.map(children, (child) => {
+                return (React__default['default'].createElement("div", { style: childStyle, className: "child" }, child));
+            })),
+            multiplyChildren(multiplier - 1)),
+        React__default['default'].createElement("div", { className: "marquee", style: marqueeStyle }, multiplyChildren(multiplier))));
+});
 
-exports["default"] = Marquee;
+exports.default = Marquee;
 //# sourceMappingURL=index.js.map

package.json

 {
   "name": "react-fast-marquee",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "A lightweight React component that utilizes the power of CSS animations to create silky smooth marquees.",
@@ -71,2 +71,3 @@ "main": "dist/index.js",
     "@types/react-dom": "^16.9.8",
+    "@types/resize-observer-browser": "^0.1.7",
     "@typescript-eslint/eslint-plugin": "^4.4.1",
@@ -92,3 +93,3 @@ "@typescript-eslint/parser": "^4.4.1",
     "ts-jest": "^26.4.4",
-    "typescript": "^4.0.3"
+    "typescript": "^4.1.3"
   },
@@ -95,0 +96,0 @@ "peerDependencies": {

README.md

@@ -80,3 +80,3 @@ # React Fast Marquee
 | `pauseOnClick`    | `boolean`                   | `false`           | Whether to pause the marquee when clicked                                                                           |
-|  `direction`       | `"left" \| "right"`       | `"left"`          | The direction the marquee is sliding                                                                                |
+|  `direction`       | `"left" \| "right"\| "up"\| "down"`       | `"left"`          | The direction the marquee slides  <br /><br /> **Warning:** Vertical marquees are currently experimental and may be buggy. Please swap the values of the marquee's height and width when setting them                                |
 | `speed`           | `number`                    | `100`              | Speed calculated as pixels/second                                                                                   |
@@ -83,0 +83,0 @@ | `delay`           | `number`                    | `0`               | Duration to delay the animation after render, in seconds                                                            |

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

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

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

35631

increased by11.52%

Lines of code

240

increased by12.15%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dev dependency count

30

increased by3.45%

No dependency changes