New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
react-marquee-text
Advanced tools
react-marquee-text - npm Package Compare versions
Comparing version 1.0.2 to 1.0.3
@@ -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 }; |
@@ -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; |
@@ -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 @@ |
| { | ||
| "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 riskPackage 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
Unpopular package
QualityThis package is not very popular.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by11.84%
63512
- Number of downloads
- increased by80.09%
1149
- Lines of code
- increased by31.13%
417
- Number of medium quality alerts
- decreased by-100%
0
- Number of medium supply chain risk alerts
- decreased by-100%
0
No dependency changes