Window resizing causes numbers to be positioned incorrectly.

[mmousawy]

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.

[JosefHobler]

Hi, did you manage to solve this issue? I got the same problem.

[Dylan700]

I am also experiencing this issue.

[Dylan700]

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.

[exceedcat]

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} />