react-marquee-slider
react-marquee-slider copied to clipboard
No animation when rendered with no children, then with some children
The following example results in style="animation-duration: 0s;"
even after some children are finally rendered.
import React, {useEffect, useState} from 'react';
const Component = () => {
const [items, setItems] = useState([]);
useEffect(() => {
const timer = setTimeout(() => {
setItems([{id: 1, text: 'abcde'}, {id: 2, text: 'fghij'}]);
}, 1000);
return () => clearTimeout(timer);
}, []);
return (
<div style={{height: '50px'}}>
<Marquee>
{
items.map(item => (
<div key={item.id}>{item.text}</div>
))
}
</Marquee>
</div>
);
};
Workaround: add a key
prop to the Marquee
which reflects changes in items
count.
Upd.: seems that we may just add children
as a dependency here: https://github.com/mxmzb/react-marquee-slider/blob/master/src/Marquee.tsx#L97 This should also allow to automatically adjust animation speed if the content changes.