Open mmousawy opened 2 years ago
Hi, did you manage to solve this issue? I got the same problem.
I am also experiencing this issue.
Here's a super hacky temporary fix... add this to your functional component:
// this is used to trigger a re-render because of the bug in AnimatedNumbers
const [, updateState] = useState<{}>()
const rerender = useCallback(() => updateState({}), [])
useEffect(() => {
addEventListener("resize", rerender)
return () => {
removeEventListener("resize", rerender)
}
}, [])
Essentially, whenever the window size changes, we force the current component (containing the AnimatedNumbers component) to re-render so that the numbers get positioned correctly. Just be mindful that this is bascially bypassing the optimisations in the react rendering lifecycle so yeah.
Here's a super hacky temporary fix... add this to your functional component:
this one didn't work for me. Instead I used key to force remount.
const [key, setKey] = useState(0);
useEffect(() => {
const updateKey = () => setKey((prev) => prev + 1);
addEventListener('resize', updateKey);
return () => {
removeEventListener('resize', updateKey);
};
}, []);
...
<AnimatedNumbers key={`type-${key}`} animateToNumber={value} />
After resizing the window and the font sizes changes, the numbers seem to be positioned incorrectly. I think it's because the translations are all based on pixels (height of numbers divs). Is there a way to use percentages for the translation? That way it will always stay relative to the container/font size.