search

ndresx / react-countdown

A customizable countdown component for React.
MIT License
746 stars 69 forks source link

Cannot Reset Time with key #208

Closed HendryVarianto14 closed 2 years ago

HendryVarianto14 commented 2 years ago

Hello,

I tried to reset the time with changing the key whenever the timer completed. But, the timer did not reset at all.

it works when i used the timer in the modal, but failed when i do it in a single page. <Countdown date={startDate.current + 5000} key={reset} onComplete={() => setReset(prev => prev + 1)} renderer={({ formatted, completed }) => { if (completed) { return ( <span className={classes.hyperlink} onClick={e => { e.preventDefault(); setReset(reset + 1); }}> ReSend </span> ); } else { return ( <span> <b> {formatted.minutes}:{formatted.seconds} </b> </span> ); } }} />

Im using Nextjs for development any help? thanks

HendryVarianto14 commented 2 years ago

Nvm. i messed up

salman-ar-sar commented 2 years ago

Can you share your complete code in a sandbox or something? I am having issues now.

SalahAdDin commented 2 years ago

Can you share your complete code in a sandbox or something? I am having issues now.

In my case, it does not reset when closing a modal.

HendryVarianto14 commented 1 year ago

Can you share your complete code in a sandbox or something? I am having issues now.

For me, i used useMemo (dont know if its a good practice to use useMemo like this) to store the time, it goes something like this: const time = useMemo(() => { if (!reset) { return Date.now() + 60000; } else { return Date.now() + 60000; } }, [reset]);

So, every time i clicked the reset button, it changes the reset state, thus, the useMemo runs again and reapplied the time. It works, but you need to include autoStart to the props for the time to runs

HendryVarianto14 commented 1 year ago

Can you share your complete code in a sandbox or something? I am having issues now.

In my case, it does not reset when closing a modal.

I never tried it, but try to use the flag of the modal as the key of the Countdown LMK if this works

SalahAdDin commented 1 year ago

Can you share your complete code in a sandbox or something? I am having issues now.

In my case, it does not reset when closing a modal.

I never tried it, but try to use the flag of the modal as the key of the Countdown LMK if this works

which flag?

HendryVarianto14 commented 1 year ago

Can you share your complete code in a sandbox or something? I am having issues now.

In my case, it does not reset when closing a modal.

I never tried it, but try to use the flag of the modal as the key of the Countdown LMK if this works

which flag?

The Modal's flag. y'know, the open={flag}

SalahAdDin commented 1 year ago

Can you share your complete code in a sandbox or something? I am having issues now.

In my case, it does not reset when closing a modal.

I never tried it, but try to use the flag of the modal as the key of the Countdown LMK if this works

which flag?

The Modal's flag. y'know, the open={flag}

I have to check it again.