Synching the animation and remaining time "manually"

[ofirTelecareBill]

Your CountdownCircleTimer is awesome!! My usecase is a bit particular - I'm combining your component with an IdleTimer component, so when the mouse doesn't move (idle), the timer starts counting from 60 sec down to 0. Since I need to use the IdleTimer timer (and not yours), I'm updating your render() function with my value coming from the IdleTimer:

const renderTime = ({ remainingTime }) => {
        // not using remainingTime
        return (
            <div className="timer">
                <div className="value">{timeRemainingInSecFromIdleTimer}</div>
            </div>
        );
    };

This all works perfectly, but my problem is that when the user touches the mouse, the timer resets to 60 but your animation continues on. I was wondering if the animation could somehow be relative to remainingTime - so when the user touches the mouse, animation goes starts back at 0.

[vydimitrov]

Hey @ofirTelecareBill, how about passing a key prop to the component and updating it when the user touches the mouse. Thus with a new key prop the timer will reset and start again from 60 seconds. Even you can play and pause the animation if needed.