Problem: React Flip Clock is not updating correctly in inactive tab about react-flip-clock-countdown HOT 4 CLOSED

could you provide a code example?

from react-flip-clock-countdown.

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

}

from react-flip-clock-countdown.

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

from react-flip-clock-countdown.

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

from react-flip-clock-countdown.