Hi everyone,

• Context: I'm making a pomodoro. After users complete a session, thay can claim rewards and then the countdown should be reset.
• Problem: After claiming rewards, the coundown does not reset, but stuck at the completed state.

  const [key, setKey] = useState(1);
  const [isCompleted, setIsCompleted] = useState(false);

  const renderCountdown = ({
    completed,
    minutes,
    seconds,
  }: {
    completed: boolean;
    minutes: number;
    seconds: number;
  }) => {
    if (completed) {
      return <div>Completed</div>;
    }

    return (
        <span>
          {minutes}:{seconds}
        </span>
    );
  };

  const handleCompleted = (): void => {
    setIsCompleted(true);
    alert('Amazing Good Job!!!');
  };

  const handleClaimRewardClick = (): void => {
    setIsCompleted(false);
    setKey(prev => prev + 1)
    alert('Rewards claimed!');
  };

  return (
      <div>
        <Countdown
          key={key}
          ref={setRef}
          date={date}
          autoStart={false}
          renderer={renderCountdown}
          onComplete={handleCompleted}
        />

        {isCompleted && (
          <button
            onClick={handleClaimRewardClick}
          >
            Claim rewards
          </button>
        )}
      </div>
  );

However, it works for the date prop:

  const handleClaimRewardClick = (): void => {
    setIsCompleted(false);
    setDate(prev => prev + 1); // this works, but I don't want to change the date
    alert('Rewards claimed!');
  };

I'm closing this. Please feel free to re-open or create a new issue if you still encounter this problem!

I don't have an example, but in componentDidMount, or useEffect, in your component that mounts the Countdown component, update a state which holds the key you pass to the countdown (can be as simple as the date). Then you can pass this state down to the countdown as key and date and the countdown would completely reset and start from new.

You could also remount the countdown when it's parent component mounts with a new date and key in place.

Hi, ok, the key approach is good, but the date needs to be an absolute date time in the future, which means you would also have to adjust it in any case when some time has passed. It could then also be used as the key.

Hmm, ok, I'll take a look at this. Thanks for reporting!

Hi, you would have to calculate the difference between Date.now() and ServerSideCurrentTImeInTimeStamp, and then basically say that now equals Date.now() + this difference. now is called every second, so the value it returns needs to be a dynamic value, not a static one.

Bump express from 4.17.1 to 4.18.2 in /examples (#232)

Bumps express from 4.17.1 to 4.18.2.

• Release notes
• Changelog
• Commits

updated-dependencies:

• dependency-name: express dependency-type: indirect ...

Signed-off-by: dependabot[bot] support@github.com

Signed-off-by: dependabot[bot] support@github.com Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps express from 4.17.1 to 4.18.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
• @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
• @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
• @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
• @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

⚠️ Dependabot is rebasing this PR ⚠️

Rebasing might not happen immediately, so don't worry if this takes some time.

Note: if you make any changes to this PR yourself, they will take precedence over the rebase.

Bumps qs from 6.5.2 to 6.5.3.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
• @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
• @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
• @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
• @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

Bump qs from 6.5.2 to 6.5.3 in /examples (#230)

Bumps qs from 6.5.2 to 6.5.3.

• Release notes
• Changelog
• Commits

updated-dependencies:

• dependency-name: qs dependency-type: indirect ...

Signed-off-by: dependabot[bot] support@github.com

Signed-off-by: dependabot[bot] support@github.com Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bump decode-uri-component from 0.2.0 to 0.2.2 (#228)

Bumps decode-uri-component from 0.2.0 to 0.2.2.

• Release notes
• Commits

updated-dependencies:

• dependency-name: decode-uri-component dependency-type: indirect ...

Signed-off-by: dependabot[bot] support@github.com

Signed-off-by: dependabot[bot] support@github.com Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

⚠️ Dependabot is rebasing this PR ⚠️

Rebasing might not happen immediately, so don't worry if this takes some time.

Note: if you make any changes to this PR yourself, they will take precedence over the rebase.

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
• @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
• @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
• @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
• @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

Bump qs from 6.5.2 to 6.5.3 (#229)

Bumps qs from 6.5.2 to 6.5.3.

• Release notes
• Changelog
• Commits

updated-dependencies:

• dependency-name: qs dependency-type: indirect ...

Signed-off-by: dependabot[bot] support@github.com

Signed-off-by: dependabot[bot] support@github.com Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps qs from 6.5.2 to 6.5.3.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
• @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
• @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
• @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
• @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

Bump decode-uri-component from 0.2.0 to 0.2.2 in /examples (#227)

Bumps decode-uri-component from 0.2.0 to 0.2.2.

• Release notes
• Commits

updated-dependencies:

• dependency-name: decode-uri-component dependency-type: indirect ...

Signed-off-by: dependabot[bot] support@github.com

Signed-off-by: dependabot[bot] support@github.com Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com>

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

You can trigger Dependabot actions by commenting on this PR:

• @dependabot rebase will rebase this PR
• @dependabot recreate will recreate this PR, overwriting any edits that have been made to it
• @dependabot merge will merge this PR after your CI passes on it
• @dependabot squash and merge will squash and merge this PR after your CI passes on it
• @dependabot cancel merge will cancel a previously requested merge and block automerging
• @dependabot reopen will reopen this PR if it is closed
• @dependabot close will close this PR and stop Dependabot recreating it. You can achieve the same result by closing it manually
• @dependabot ignore this major version will close this PR and stop Dependabot creating any more for this major version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this minor version will close this PR and stop Dependabot creating any more for this minor version (unless you reopen the PR or upgrade to it yourself)
• @dependabot ignore this dependency will close this PR and stop Dependabot creating any more for this dependency (unless you reopen the PR or upgrade to it yourself)
• @dependabot use these labels will set the current labels as the default for future PRs for this repo and language
• @dependabot use these reviewers will set the current reviewers as the default for future PRs for this repo and language
• @dependabot use these assignees will set the current assignees as the default for future PRs for this repo and language
• @dependabot use this milestone will set the current milestone as the default for future PRs for this repo and language

You can disable automated security fix PRs for this repo from the Security Alerts page.

Hi @Zachaccino, glad you found a solution yourself! If I may suggest an alternative way of doing it, you could use React's useRef to also persist the date across re-renders (then you don't need to define the setter via useState).

Just something I wanted to bring up in case you were not aware of this yet!

I was adapting a component from an old project to use and I noticed that the Countdown only worked when my wrapper component hot reloaded. I had to add a useEffect and manually start the countdown. Is that expected behavior? Why doesn't a change in date prop autoStart the Countdown component?

I'm using Nextjs 13.0.0 which uses react 18.2.0 and version 2.3.5 of react-countdown

Here's what I was originally using that was not working. (end is a Date string that is retrieved from an api call)

import Countdown from "react-countdown";

export const CountdownTimer = ({ end }) => {
  return (
    <div>
      <span>Live</span>
      <Countdown date={end} daysInHours />
    </div>
  );
};
export default CountdownTimer;

When you add a ref and useEffect to manually start it, it works as expected.

import Countdown from "react-countdown";
import { useEffect, useRef } from "react";

export const CountdownTimer = ({ end }) => {
 const countdownRef = useRef(null);
 
 useEffect(() => {
   if (countdownRef && countdownRef.current && end) {
     countdownRef.current.api.start();
   }
 }, [countdownRef, end]);
 
 return (
   <div>
     <span>Live</span>
     <Countdown date={end} daysInHours ref={countdownRef} />
   </div>
 );
};
export default CountdownTimer;

Hey all,

I am sorry I don't know the repo so well but I am trying to implement in functional react with no classes (newer standards and all). I am completely lost on how to implement the getAPI() and the start and pause.

Any chance someone could whip up a quick example?

Thank you for your time!

I'm closing this since the original question got answered; thank you!

I am getting maximum depth reached error while adding as a timer in my application

I'm closing this. Please feel free to re-open or create a new issue if you still encounter this problem!