react-marquee-text - npm Package Compare versions

Comparing version 1.0.2 to 1.0.3

dist/index.es.js

@@ -0,4 +1,38 @@
+'use client';
 import { jsx } from 'react/jsx-runtime';
 import { useState, useEffect, useRef, Children } from 'react';
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 /**
@@ -12,8 +46,9 @@ * UseInView
  */
-function useInView({ ref, rootMargin = '10px', threshold = 0.4, repeat = false }) {
+function useInView(_a) {
+    var ref = _a.ref, _b = _a.rootMargin, rootMargin = _b === void 0 ? '10px' : _b, _c = _a.threshold, threshold = _c === void 0 ? 0.4 : _c, _d = _a.repeat, repeat = _d === void 0 ? false : _d;
     // State and setter for storing whether element is visible
-    const [isIntersecting, setIntersecting] = useState(false);
-    useEffect(() => {
-        const callbackFunction = (entries) => {
-            const [entry] = entries;
+    var _e = useState(false), isIntersecting = _e[0], setIntersecting = _e[1];
+    useEffect(function () {
+        var callbackFunction = function (entries) {
+            var entry = entries[0];
             setIntersecting(entry.isIntersecting);
@@ -24,6 +59,6 @@ if (!repeat && entry.intersectionRatio > 0) {
         };
-        let observerRefValue = null;
-        const observer = new IntersectionObserver(callbackFunction, {
-            rootMargin,
-            threshold
+        var observerRefValue = null;
+        var observer = new IntersectionObserver(callbackFunction, {
+            rootMargin: rootMargin,
+            threshold: threshold
         });
@@ -34,3 +69,3 @@ if (ref.current) {
         }
-        return () => {
+        return function () {
             if (observerRefValue)
@@ -43,3 +78,3 @@ observer.unobserve(observerRefValue);
 
-const marqueeContainerStyles = {
+var marqueeContainerStyles = {
     position: 'relative',
@@ -49,19 +84,22 @@ width: '100%',
 };
-const marqueeItemsStyles = (startPosition, time, direction, willChange) => (Object.assign({ display: 'inline-block', whiteSpace: 'nowrap', transform: `translate3d(-${startPosition}px, 0, 0)`, animationName: 'marqueeScroll', animationDuration: `${time}s`, animationTimingFunction: 'linear', animationIterationCount: 'infinite', animationPlayState: 'var(--marquee-play)', animationDirection: direction === 'right' ? 'reverse' : undefined }, (willChange && { willChange: 'transform' })));
-const marqueeItemStyles = (marginRight) => ({
+var marqueeItemsStyles = function (startPosition, time, direction, willChange) { return (__assign({ display: 'inline-block', whiteSpace: 'nowrap', transform: "translate3d(-".concat(startPosition, "px, 0, 0)"), animationName: 'marqueeScroll', animationDuration: "".concat(time, "s"), animationTimingFunction: 'linear', animationIterationCount: 'infinite', animationPlayState: 'var(--marquee-play)', animationDirection: direction === 'right' ? 'reverse' : undefined }, (willChange && { willChange: 'transform' }))); };
+var marqueeItemStyles = function (marginRight) { return ({
     position: 'relative',
     display: 'inline-block',
     marginRight: marginRight
-});
-const getClonedItems = (items, copyTimes = 1) => {
+}); };
+var getClonedItems = function (items, copyTimes) {
+    if (copyTimes === void 0) { copyTimes = 1; }
     return Array(copyTimes).fill(items).flat();
 };
-const MarqueeText = ({ className = 'marquee', duration = 50, direction = 'left', pauseOnHover = false, playOnlyInView = true, textSpacing = '0.15em', treshold = 0.1, children }) => {
-    const marqueeContainer = useRef(null);
-    const marqueeItems = useRef(null);
-    const [translateFrom, setTranslateFrom] = useState(0);
-    const [showItems, setShowItems] = useState(Children.toArray(children));
-    const [initialDuration, setInitialDuration] = useState(duration);
-    const [isPlaying, setIsPlaying] = useState(true);
-    const isVisible = useInView({
+var MarqueeText = function (_a) {
+    var _b;
+    var _c = _a.className, className = _c === void 0 ? 'marquee' : _c, _d = _a.duration, duration = _d === void 0 ? 50 : _d, _e = _a.direction, direction = _e === void 0 ? 'left' : _e, _f = _a.pauseOnHover, pauseOnHover = _f === void 0 ? false : _f, _g = _a.playOnlyInView, playOnlyInView = _g === void 0 ? true : _g, _h = _a.textSpacing, textSpacing = _h === void 0 ? '0.15em' : _h, _j = _a.treshold, treshold = _j === void 0 ? 0.1 : _j, children = _a.children;
+    var marqueeContainer = useRef(null);
+    var marqueeItems = useRef(null);
+    var _k = useState(0), translateFrom = _k[0], setTranslateFrom = _k[1];
+    var _l = useState(Children.toArray(children)), showItems = _l[0], setShowItems = _l[1];
+    var _m = useState(duration), initialDuration = _m[0], setInitialDuration = _m[1];
+    var _o = useState(true), isPlaying = _o[0], setIsPlaying = _o[1];
+    var isVisible = useInView({
         ref: marqueeContainer,
@@ -72,8 +110,8 @@ rootMargin: '10px',
     });
-    useEffect(() => {
-        const containerWidth = Math.floor(marqueeContainer.current.offsetWidth);
-        const itemsWidth = Math.floor(marqueeItems.current.scrollWidth);
-        const cloneTimes = Math.max(2, Math.ceil((containerWidth * 2) / itemsWidth));
-        const translateFromVal = itemsWidth * Math.floor(cloneTimes / 2);
-        const durationVal = duration * parseFloat((translateFromVal / containerWidth).toFixed(2));
+    useEffect(function () {
+        var containerWidth = Math.floor(marqueeContainer.current.offsetWidth);
+        var itemsWidth = Math.floor(marqueeItems.current.scrollWidth);
+        var cloneTimes = Math.max(2, Math.ceil((containerWidth * 2) / itemsWidth));
+        var translateFromVal = itemsWidth * Math.floor(cloneTimes / 2);
+        var durationVal = duration * parseFloat((translateFromVal / containerWidth).toFixed(2));
         setShowItems(getClonedItems(Children.toArray(children), cloneTimes));
@@ -83,3 +121,3 @@ setTranslateFrom(translateFromVal);
     }, [children, duration]);
-    useEffect(() => {
+    useEffect(function () {
         if (!playOnlyInView)
@@ -94,3 +132,3 @@ return;
     }, [isVisible, playOnlyInView]);
-    const handleMouseEnter = () => {
+    var handleMouseEnter = function () {
         if (pauseOnHover) {
@@ -100,3 +138,3 @@ setIsPlaying(false);
     };
-    const handleMouseLeave = () => {
+    var handleMouseLeave = function () {
         if (pauseOnHover) {
@@ -106,5 +144,5 @@ setIsPlaying(true);
     };
-    return (jsx("div", { ref: marqueeContainer, className: `${className}`, style: Object.assign(Object.assign({}, marqueeContainerStyles), { ['--marquee-play']: isPlaying ? 'running' : 'paused' }), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: jsx("div", { className: `${className}__items`, style: marqueeItemsStyles(translateFrom, initialDuration, direction), ref: marqueeItems, children: showItems.map((item, index) => (jsx("div", { className: `${className}__item`, style: marqueeItemStyles(textSpacing), children: item }, index))) }) }));
+    return (jsx("div", { ref: marqueeContainer, className: "".concat(className), style: __assign(__assign({}, marqueeContainerStyles), (_b = {}, _b['--marquee-play'] = isPlaying ? 'running' : 'paused', _b)), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: jsx("div", { className: "".concat(className, "__items"), style: marqueeItemsStyles(translateFrom, initialDuration, direction), ref: marqueeItems, children: showItems.map(function (item, index) { return (jsx("div", { className: "".concat(className, "__item"), style: marqueeItemStyles(textSpacing), children: item }, index)); }) }) }));
 };
 
 export { MarqueeText as default };

dist/index.js

@@ -0,1 +1,2 @@
+'use client';
 'use strict';
@@ -6,2 +7,35 @@
 
+/******************************************************************************
+Copyright (c) Microsoft Corporation.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+PERFORMANCE OF THIS SOFTWARE.
+***************************************************************************** */
+/* global Reflect, Promise, SuppressedError, Symbol */
+
+
+var __assign = function() {
+    __assign = Object.assign || function __assign(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+
+typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+    var e = new Error(message);
+    return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+};
+
 /**
@@ -15,8 +49,9 @@ * UseInView
  */
-function useInView({ ref, rootMargin = '10px', threshold = 0.4, repeat = false }) {
+function useInView(_a) {
+    var ref = _a.ref, _b = _a.rootMargin, rootMargin = _b === void 0 ? '10px' : _b, _c = _a.threshold, threshold = _c === void 0 ? 0.4 : _c, _d = _a.repeat, repeat = _d === void 0 ? false : _d;
     // State and setter for storing whether element is visible
-    const [isIntersecting, setIntersecting] = react.useState(false);
-    react.useEffect(() => {
-        const callbackFunction = (entries) => {
-            const [entry] = entries;
+    var _e = react.useState(false), isIntersecting = _e[0], setIntersecting = _e[1];
+    react.useEffect(function () {
+        var callbackFunction = function (entries) {
+            var entry = entries[0];
             setIntersecting(entry.isIntersecting);
@@ -27,6 +62,6 @@ if (!repeat && entry.intersectionRatio > 0) {
         };
-        let observerRefValue = null;
-        const observer = new IntersectionObserver(callbackFunction, {
-            rootMargin,
-            threshold
+        var observerRefValue = null;
+        var observer = new IntersectionObserver(callbackFunction, {
+            rootMargin: rootMargin,
+            threshold: threshold
         });
@@ -37,3 +72,3 @@ if (ref.current) {
         }
-        return () => {
+        return function () {
             if (observerRefValue)
@@ -46,3 +81,3 @@ observer.unobserve(observerRefValue);
 
-const marqueeContainerStyles = {
+var marqueeContainerStyles = {
     position: 'relative',
@@ -52,19 +87,22 @@ width: '100%',
 };
-const marqueeItemsStyles = (startPosition, time, direction, willChange) => (Object.assign({ display: 'inline-block', whiteSpace: 'nowrap', transform: `translate3d(-${startPosition}px, 0, 0)`, animationName: 'marqueeScroll', animationDuration: `${time}s`, animationTimingFunction: 'linear', animationIterationCount: 'infinite', animationPlayState: 'var(--marquee-play)', animationDirection: direction === 'right' ? 'reverse' : undefined }, (willChange && { willChange: 'transform' })));
-const marqueeItemStyles = (marginRight) => ({
+var marqueeItemsStyles = function (startPosition, time, direction, willChange) { return (__assign({ display: 'inline-block', whiteSpace: 'nowrap', transform: "translate3d(-".concat(startPosition, "px, 0, 0)"), animationName: 'marqueeScroll', animationDuration: "".concat(time, "s"), animationTimingFunction: 'linear', animationIterationCount: 'infinite', animationPlayState: 'var(--marquee-play)', animationDirection: direction === 'right' ? 'reverse' : undefined }, (willChange && { willChange: 'transform' }))); };
+var marqueeItemStyles = function (marginRight) { return ({
     position: 'relative',
     display: 'inline-block',
     marginRight: marginRight
-});
-const getClonedItems = (items, copyTimes = 1) => {
+}); };
+var getClonedItems = function (items, copyTimes) {
+    if (copyTimes === void 0) { copyTimes = 1; }
     return Array(copyTimes).fill(items).flat();
 };
-const MarqueeText = ({ className = 'marquee', duration = 50, direction = 'left', pauseOnHover = false, playOnlyInView = true, textSpacing = '0.15em', treshold = 0.1, children }) => {
-    const marqueeContainer = react.useRef(null);
-    const marqueeItems = react.useRef(null);
-    const [translateFrom, setTranslateFrom] = react.useState(0);
-    const [showItems, setShowItems] = react.useState(react.Children.toArray(children));
-    const [initialDuration, setInitialDuration] = react.useState(duration);
-    const [isPlaying, setIsPlaying] = react.useState(true);
-    const isVisible = useInView({
+var MarqueeText = function (_a) {
+    var _b;
+    var _c = _a.className, className = _c === void 0 ? 'marquee' : _c, _d = _a.duration, duration = _d === void 0 ? 50 : _d, _e = _a.direction, direction = _e === void 0 ? 'left' : _e, _f = _a.pauseOnHover, pauseOnHover = _f === void 0 ? false : _f, _g = _a.playOnlyInView, playOnlyInView = _g === void 0 ? true : _g, _h = _a.textSpacing, textSpacing = _h === void 0 ? '0.15em' : _h, _j = _a.treshold, treshold = _j === void 0 ? 0.1 : _j, children = _a.children;
+    var marqueeContainer = react.useRef(null);
+    var marqueeItems = react.useRef(null);
+    var _k = react.useState(0), translateFrom = _k[0], setTranslateFrom = _k[1];
+    var _l = react.useState(react.Children.toArray(children)), showItems = _l[0], setShowItems = _l[1];
+    var _m = react.useState(duration), initialDuration = _m[0], setInitialDuration = _m[1];
+    var _o = react.useState(true), isPlaying = _o[0], setIsPlaying = _o[1];
+    var isVisible = useInView({
         ref: marqueeContainer,
@@ -75,8 +113,8 @@ rootMargin: '10px',
     });
-    react.useEffect(() => {
-        const containerWidth = Math.floor(marqueeContainer.current.offsetWidth);
-        const itemsWidth = Math.floor(marqueeItems.current.scrollWidth);
-        const cloneTimes = Math.max(2, Math.ceil((containerWidth * 2) / itemsWidth));
-        const translateFromVal = itemsWidth * Math.floor(cloneTimes / 2);
-        const durationVal = duration * parseFloat((translateFromVal / containerWidth).toFixed(2));
+    react.useEffect(function () {
+        var containerWidth = Math.floor(marqueeContainer.current.offsetWidth);
+        var itemsWidth = Math.floor(marqueeItems.current.scrollWidth);
+        var cloneTimes = Math.max(2, Math.ceil((containerWidth * 2) / itemsWidth));
+        var translateFromVal = itemsWidth * Math.floor(cloneTimes / 2);
+        var durationVal = duration * parseFloat((translateFromVal / containerWidth).toFixed(2));
         setShowItems(getClonedItems(react.Children.toArray(children), cloneTimes));
@@ -86,3 +124,3 @@ setTranslateFrom(translateFromVal);
     }, [children, duration]);
-    react.useEffect(() => {
+    react.useEffect(function () {
         if (!playOnlyInView)
@@ -97,3 +135,3 @@ return;
     }, [isVisible, playOnlyInView]);
-    const handleMouseEnter = () => {
+    var handleMouseEnter = function () {
         if (pauseOnHover) {
@@ -103,3 +141,3 @@ setIsPlaying(false);
     };
-    const handleMouseLeave = () => {
+    var handleMouseLeave = function () {
         if (pauseOnHover) {
@@ -109,5 +147,5 @@ setIsPlaying(true);
     };
-    return (jsxRuntime.jsx("div", { ref: marqueeContainer, className: `${className}`, style: Object.assign(Object.assign({}, marqueeContainerStyles), { ['--marquee-play']: isPlaying ? 'running' : 'paused' }), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: jsxRuntime.jsx("div", { className: `${className}__items`, style: marqueeItemsStyles(translateFrom, initialDuration, direction), ref: marqueeItems, children: showItems.map((item, index) => (jsxRuntime.jsx("div", { className: `${className}__item`, style: marqueeItemStyles(textSpacing), children: item }, index))) }) }));
+    return (jsxRuntime.jsx("div", { ref: marqueeContainer, className: "".concat(className), style: __assign(__assign({}, marqueeContainerStyles), (_b = {}, _b['--marquee-play'] = isPlaying ? 'running' : 'paused', _b)), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: jsxRuntime.jsx("div", { className: "".concat(className, "__items"), style: marqueeItemsStyles(translateFrom, initialDuration, direction), ref: marqueeItems, children: showItems.map(function (item, index) { return (jsxRuntime.jsx("div", { className: "".concat(className, "__item"), style: marqueeItemStyles(textSpacing), children: item }, index)); }) }) }));
 };
 
 module.exports = MarqueeText;

dist/index.umd.js

@@ -0,1 +1,2 @@
+'use client';
 (function (global, factory) {
@@ -7,2 +8,35 @@ typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory(require('react/jsx-runtime'), require('react')) :
 
+    /******************************************************************************
+    Copyright (c) Microsoft Corporation.
+
+    Permission to use, copy, modify, and/or distribute this software for any
+    purpose with or without fee is hereby granted.
+
+    THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH
+    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY
+    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,
+    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM
+    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR
+    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR
+    PERFORMANCE OF THIS SOFTWARE.
+    ***************************************************************************** */
+    /* global Reflect, Promise, SuppressedError, Symbol */
+
+
+    var __assign = function() {
+        __assign = Object.assign || function __assign(t) {
+            for (var s, i = 1, n = arguments.length; i < n; i++) {
+                s = arguments[i];
+                for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p];
+            }
+            return t;
+        };
+        return __assign.apply(this, arguments);
+    };
+
+    typeof SuppressedError === "function" ? SuppressedError : function (error, suppressed, message) {
+        var e = new Error(message);
+        return e.name = "SuppressedError", e.error = error, e.suppressed = suppressed, e;
+    };
+
     /**
@@ -16,8 +50,9 @@ * UseInView
      */
-    function useInView({ ref, rootMargin = '10px', threshold = 0.4, repeat = false }) {
+    function useInView(_a) {
+        var ref = _a.ref, _b = _a.rootMargin, rootMargin = _b === void 0 ? '10px' : _b, _c = _a.threshold, threshold = _c === void 0 ? 0.4 : _c, _d = _a.repeat, repeat = _d === void 0 ? false : _d;
         // State and setter for storing whether element is visible
-        const [isIntersecting, setIntersecting] = react.useState(false);
-        react.useEffect(() => {
-            const callbackFunction = (entries) => {
-                const [entry] = entries;
+        var _e = react.useState(false), isIntersecting = _e[0], setIntersecting = _e[1];
+        react.useEffect(function () {
+            var callbackFunction = function (entries) {
+                var entry = entries[0];
                 setIntersecting(entry.isIntersecting);
@@ -28,6 +63,6 @@ if (!repeat && entry.intersectionRatio > 0) {
             };
-            let observerRefValue = null;
-            const observer = new IntersectionObserver(callbackFunction, {
-                rootMargin,
-                threshold
+            var observerRefValue = null;
+            var observer = new IntersectionObserver(callbackFunction, {
+                rootMargin: rootMargin,
+                threshold: threshold
             });
@@ -38,3 +73,3 @@ if (ref.current) {
             }
-            return () => {
+            return function () {
                 if (observerRefValue)
@@ -47,3 +82,3 @@ observer.unobserve(observerRefValue);
 
-    const marqueeContainerStyles = {
+    var marqueeContainerStyles = {
         position: 'relative',
@@ -53,19 +88,22 @@ width: '100%',
     };
-    const marqueeItemsStyles = (startPosition, time, direction, willChange) => (Object.assign({ display: 'inline-block', whiteSpace: 'nowrap', transform: `translate3d(-${startPosition}px, 0, 0)`, animationName: 'marqueeScroll', animationDuration: `${time}s`, animationTimingFunction: 'linear', animationIterationCount: 'infinite', animationPlayState: 'var(--marquee-play)', animationDirection: direction === 'right' ? 'reverse' : undefined }, (willChange && { willChange: 'transform' })));
-    const marqueeItemStyles = (marginRight) => ({
+    var marqueeItemsStyles = function (startPosition, time, direction, willChange) { return (__assign({ display: 'inline-block', whiteSpace: 'nowrap', transform: "translate3d(-".concat(startPosition, "px, 0, 0)"), animationName: 'marqueeScroll', animationDuration: "".concat(time, "s"), animationTimingFunction: 'linear', animationIterationCount: 'infinite', animationPlayState: 'var(--marquee-play)', animationDirection: direction === 'right' ? 'reverse' : undefined }, (willChange && { willChange: 'transform' }))); };
+    var marqueeItemStyles = function (marginRight) { return ({
         position: 'relative',
         display: 'inline-block',
         marginRight: marginRight
-    });
-    const getClonedItems = (items, copyTimes = 1) => {
+    }); };
+    var getClonedItems = function (items, copyTimes) {
+        if (copyTimes === void 0) { copyTimes = 1; }
         return Array(copyTimes).fill(items).flat();
     };
-    const MarqueeText = ({ className = 'marquee', duration = 50, direction = 'left', pauseOnHover = false, playOnlyInView = true, textSpacing = '0.15em', treshold = 0.1, children }) => {
-        const marqueeContainer = react.useRef(null);
-        const marqueeItems = react.useRef(null);
-        const [translateFrom, setTranslateFrom] = react.useState(0);
-        const [showItems, setShowItems] = react.useState(react.Children.toArray(children));
-        const [initialDuration, setInitialDuration] = react.useState(duration);
-        const [isPlaying, setIsPlaying] = react.useState(true);
-        const isVisible = useInView({
+    var MarqueeText = function (_a) {
+        var _b;
+        var _c = _a.className, className = _c === void 0 ? 'marquee' : _c, _d = _a.duration, duration = _d === void 0 ? 50 : _d, _e = _a.direction, direction = _e === void 0 ? 'left' : _e, _f = _a.pauseOnHover, pauseOnHover = _f === void 0 ? false : _f, _g = _a.playOnlyInView, playOnlyInView = _g === void 0 ? true : _g, _h = _a.textSpacing, textSpacing = _h === void 0 ? '0.15em' : _h, _j = _a.treshold, treshold = _j === void 0 ? 0.1 : _j, children = _a.children;
+        var marqueeContainer = react.useRef(null);
+        var marqueeItems = react.useRef(null);
+        var _k = react.useState(0), translateFrom = _k[0], setTranslateFrom = _k[1];
+        var _l = react.useState(react.Children.toArray(children)), showItems = _l[0], setShowItems = _l[1];
+        var _m = react.useState(duration), initialDuration = _m[0], setInitialDuration = _m[1];
+        var _o = react.useState(true), isPlaying = _o[0], setIsPlaying = _o[1];
+        var isVisible = useInView({
             ref: marqueeContainer,
@@ -76,8 +114,8 @@ rootMargin: '10px',
         });
-        react.useEffect(() => {
-            const containerWidth = Math.floor(marqueeContainer.current.offsetWidth);
-            const itemsWidth = Math.floor(marqueeItems.current.scrollWidth);
-            const cloneTimes = Math.max(2, Math.ceil((containerWidth * 2) / itemsWidth));
-            const translateFromVal = itemsWidth * Math.floor(cloneTimes / 2);
-            const durationVal = duration * parseFloat((translateFromVal / containerWidth).toFixed(2));
+        react.useEffect(function () {
+            var containerWidth = Math.floor(marqueeContainer.current.offsetWidth);
+            var itemsWidth = Math.floor(marqueeItems.current.scrollWidth);
+            var cloneTimes = Math.max(2, Math.ceil((containerWidth * 2) / itemsWidth));
+            var translateFromVal = itemsWidth * Math.floor(cloneTimes / 2);
+            var durationVal = duration * parseFloat((translateFromVal / containerWidth).toFixed(2));
             setShowItems(getClonedItems(react.Children.toArray(children), cloneTimes));
@@ -87,3 +125,3 @@ setTranslateFrom(translateFromVal);
         }, [children, duration]);
-        react.useEffect(() => {
+        react.useEffect(function () {
             if (!playOnlyInView)
@@ -98,3 +136,3 @@ return;
         }, [isVisible, playOnlyInView]);
-        const handleMouseEnter = () => {
+        var handleMouseEnter = function () {
             if (pauseOnHover) {
@@ -104,3 +142,3 @@ setIsPlaying(false);
         };
-        const handleMouseLeave = () => {
+        var handleMouseLeave = function () {
             if (pauseOnHover) {
@@ -110,3 +148,3 @@ setIsPlaying(true);
         };
-        return (jsxRuntime.jsx("div", { ref: marqueeContainer, className: `${className}`, style: Object.assign(Object.assign({}, marqueeContainerStyles), { ['--marquee-play']: isPlaying ? 'running' : 'paused' }), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: jsxRuntime.jsx("div", { className: `${className}__items`, style: marqueeItemsStyles(translateFrom, initialDuration, direction), ref: marqueeItems, children: showItems.map((item, index) => (jsxRuntime.jsx("div", { className: `${className}__item`, style: marqueeItemStyles(textSpacing), children: item }, index))) }) }));
+        return (jsxRuntime.jsx("div", { ref: marqueeContainer, className: "".concat(className), style: __assign(__assign({}, marqueeContainerStyles), (_b = {}, _b['--marquee-play'] = isPlaying ? 'running' : 'paused', _b)), onMouseEnter: handleMouseEnter, onMouseLeave: handleMouseLeave, children: jsxRuntime.jsx("div", { className: "".concat(className, "__items"), style: marqueeItemsStyles(translateFrom, initialDuration, direction), ref: marqueeItems, children: showItems.map(function (item, index) { return (jsxRuntime.jsx("div", { className: "".concat(className, "__item"), style: marqueeItemStyles(textSpacing), children: item }, index)); }) }) }));
     };
@@ -113,0 +151,0 @@

package.json

 {
   "name": "react-marquee-text",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "A React TS component that creates continous scrolling text.",
@@ -5,0 +5,0 @@ "author": "Stephen Scaff <stephenscaff.com>",

Fixed alerts

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

Improved metrics

Total package byte prevSize

63512

11.84%

Lines of code

417

31.13%

Number of medium supply chain risk alerts

0

-100%

No dependency changes