How to change children props on onComplete

[OndrejovaV]

Hi,

I am trying to use your advice from here: #218 on how to continue to negative numbers once the remaining time is 0.

I set the onComplete to true, but I don't know how to set new props for the child. So the color of the process bar would be transparent and the -elapsedTime is displayed instead of remaingTime.

Here is my code:

const renderTime = ({ remainingTime}) => {
    
        return (
            <div className="time-wrapper">
                <span className="time-left-value">
                    {secondsToMinutes(remainingTime)}
                </span>
                <span className="time-unit">min</span>
            </div>
        )
}

const Timer = () => {
    

    return (
        <div className="timer-base">
            <CountdownCircleTimer
                isPlaying
                duration={duration}
                colors={'#EDAF56'}
                initialRemainingTime={timeLeft}
                size={276}
                strokeWidth={6}
                trailColor={'#EAF1FF'}
                onComplete={() => ({
                    shouldRepeat: true,
                })}
            >
                {renderTime}
            </CountdownCircleTimer>
        </div>
    )
}

Thank You in advance

[vydimitrov]

Hey @OndrejovaV, you can do something like this:

const isCompletedRef = useRef(false)

const renderTime = ({ remainingTime, elapsedTime }) => {
        return (
            <div className="time-wrapper">
                <span className="time-left-value">
                    {isCompletedRef.current ? -elapsedTime : secondsToMinutes(remainingTime)}
                </span>
                <span className="time-unit">min</span>
            </div>
        )
}

const Timer = () => {
    

    return (
        <div className="timer-base">
            <CountdownCircleTimer
                isPlaying
                duration={duration}
                colors={isCompletedRef.current ? 'rgba(0,0,0,0)' : '#EDAF56'}
                initialRemainingTime={timeLeft}
                size={276}
                strokeWidth={6}
                trailColor={'#EAF1FF'}
                onComplete={() => {
                     isCompletedRef.current = true;
                     return { shouldRepeat: true } 
                }}
            >
                {renderTime}
            </CountdownCircleTimer>
        </div>
    )
}