Problem: React Flip Clock is not updating correctly in inactive tab

[Kostanios]

The component gets derailed if you switch to another tab, the problem is solved if you perform force render after visibilitychange event. But it would be cool to add something like this out of the box

[sLeeNguyen]

could you provide a code example?

[Kostanios]

could you provide a code example?

Looks not perfect, but with force render timer works better due browser tabs switch:

import { useEffect, useState } from "react";
import FlipClockCountdown from "@leenguyen/react-flip-clock-countdown";

export default function CustomFlipClockCountdown({ className, onComplete, to, labels }) {
const [_, forceRender] = useState({});

useEffect(() => {
    const forceUpdate = () => forceRender({});
    document.addEventListener("visibilitychange", forceUpdate);

    return () => document.removeEventListener("visibilitychange", forceUpdate);
}, []);

return <FlipClockCountdown key={_} className={className} onComplete={onComplete} to={to} labels={labels} />;

}

[sLeeNguyen]

@Kostanios
Sorry. I mean the code to reproduce this issue

[sLeeNguyen]

Ah. No worries. I've just understood your issue