45 lines
1.4 KiB
JavaScript
45 lines
1.4 KiB
JavaScript
import React, { useRef, useState, useEffect } from 'react';
|
|
import './MarqueeText.css';
|
|
|
|
const MarqueeText = ({ text, className, style, duration = '10s' }) => {
|
|
const containerRef = useRef(null);
|
|
const textRef = useRef(null);
|
|
const [isOverflowing, setIsOverflowing] = useState(false);
|
|
|
|
const formattedDuration = typeof duration === 'number' ? `${duration}s` : duration;
|
|
|
|
useEffect(() => {
|
|
const checkOverflow = () => {
|
|
if (containerRef.current && textRef.current) {
|
|
setIsOverflowing(textRef.current.scrollWidth > containerRef.current.clientWidth);
|
|
}
|
|
};
|
|
checkOverflow();
|
|
window.addEventListener('resize', checkOverflow);
|
|
return () => window.removeEventListener('resize', checkOverflow);
|
|
}, [text]);
|
|
|
|
return (
|
|
<div className={`marquee-container ${className || ''}`} ref={containerRef} style={{ ...style, overflow: 'hidden', whiteSpace: 'nowrap', width: '100%', flex: '1 1 0' }}>
|
|
<div
|
|
className="marquee-inner-text"
|
|
ref={textRef}
|
|
style={{
|
|
display: 'inline-block',
|
|
animation: isOverflowing ? `marquee-scroll ${formattedDuration} linear infinite` : 'none',
|
|
paddingLeft: isOverflowing ? '100%' : '0',
|
|
fontSize: 'inherit',
|
|
fontWeight: 'inherit',
|
|
color: 'inherit',
|
|
lineHeight: 'inherit',
|
|
letterSpacing: 'inherit'
|
|
}}
|
|
>
|
|
{text}
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default MarqueeText;
|