react-countdown-circle-timer on reload counter restart issue

[abdelalishare]

Hello I need to make the counter count without restarting on page reload

import {
  CountdownCircleTimer,
} from "react-countdown-circle-timer";
import React from "react";

const minuteSeconds = 60;
const hourSeconds = 3600;
const daySeconds = 86400;

const timerProps = {
  isPlaying: true,
  size: 120,
};

const renderTime = (dimension, time) => {
  return (
    <div className="time-wrapper">
      <div className="time">{time}</div>
      <div>{dimension}</div>
    </div>
  );
};

const getTimeMinutes = (time) => ((time % hourSeconds) / minuteSeconds) | 0;
const getTimeHours = (time) => ((time % daySeconds) / hourSeconds) | 0;
const getTimeDays = (time) => (time / daySeconds) | 0;

const CountDown = ({ parentContainerClasses, size }) => {

  const RED = "red";
  const startTime = Date.now() / 1000; // use UNIX timestamp in seconds
  const endTime = startTime + 1123200; // use UNIX timestamp in seconds

  const remainingTime = endTime - startTime;
  const days = Math.ceil(remainingTime / daySeconds);
  const daysDuration = days * daySeconds;

  return (
    <div className={`${parentContainerClasses}`}>
      <div className="flex gap-5 circles__parent">
        <div className="relative flex items-center flex-col">
          <CountdownCircleTimer
            {...timerProps}
            key={0}
            colors={RED}
            size={size}
            duration={daysDuration}
            initialRemainingTime={remainingTime}
            trailColor={"white"}
            strokeWidth={5}
            trailStrokeWidth={10}
          >
            {({ elapsedTime, color }) => (
              <span className="text-white text-2xl font-black">
                {renderTime("", getTimeDays(daysDuration - elapsedTime))}
              </span>
            )}
          </CountdownCircleTimer>
          <span className="text-white">days</span>
        </div>
        <div className="flex items-center flex-col">
          <CountdownCircleTimer
            {...timerProps}
            key={0}
            colors={RED}
            size={size}
            duration={daySeconds}
            trailColor={"white"}
            strokeWidth={5}
            trailStrokeWidth={10}
            initialRemainingTime={remainingTime % daySeconds}
            onComplete={(totalElapsedTime) => ({
              shouldRepeat: remainingTime - totalElapsedTime > hourSeconds,
            })}
          >
            {({ elapsedTime }) => (
              <span className="text-white text-2xl font-black">
                {renderTime("", getTimeHours(daySeconds - elapsedTime))}
              </span>
            )}
          </CountdownCircleTimer>
          <span className="text-white">hours</span>
        </div>
        <div className="flex items-center flex-col">
          <CountdownCircleTimer
            {...timerProps}
            key={0}

            colors={RED}
            size={size}
            duration={hourSeconds}
            initialRemainingTime={remainingTime % hourSeconds}
            trailColor={"white"}
            strokeWidth={5}
            trailStrokeWidth={10}
            onComplete={(totalElapsedTime) => ({
              shouldRepeat: remainingTime - totalElapsedTime > minuteSeconds,
            })}
          >
            {({ elapsedTime, color }) => (
              <span className="text-white text-2xl font-black">
                {renderTime("", getTimeMinutes(hourSeconds - elapsedTime))}
              </span>
            )}
          </CountdownCircleTimer>
          <span className="text-white">minutes</span>
        </div>
      </div>
    </div>
  );
};

export default CountDown;

[vydimitrov]

Hey @abdelalishare, you will need to save the elapsed time, may be using the onUpdate callback, to either local storage or some remote server and use that time to start the timer again once the page is reloaded.