ndresx
Repos
35
Followers
22
Following
16

A customizable countdown component for React.

637
57

Prettier is an opinionated code formatter.

44720
3456

A Redux reducer/middleware for managing asynchronous and operational states.

A declarative, efficient, and flexible JavaScript library for building user interfaces.

201121
40300

JavaScript Style Guide

131210
22190

Delightful JavaScript Testing.

41276
5964

Events

closed issue
Cannot reset countdown with key

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!');
  };
Created at 1 week ago
issue comment
Cannot reset countdown with key

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

Created at 1 week ago
started
Created at 1 week ago
Created at 1 week ago
issue comment
SSR based date value calculation

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.

Created at 1 month ago
issue comment
SSR based date value calculation

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

Created at 1 month ago
issue comment
Cannot reset countdown with key

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.

Created at 1 month ago
issue comment
Types aren't compatible with React v18

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

Created at 1 month ago
issue comment
SSR based date value calculation

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.

Created at 1 month ago
delete branch
ndresx delete branch dependabot/npm_and_yarn/examples/express-4.18.2
Created at 1 month ago

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

Bumps express from 4.17.1 to 4.18.2.


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>

Created at 1 month ago
pull request closed
Bump express from 4.17.1 to 4.18.2 in /examples

Bumps express from 4.17.1 to 4.18.2.

Dependabot compatibility score

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.

Created at 1 month ago
delete branch
ndresx delete branch dependabot/npm_and_yarn/examples/qs-6.5.3
Created at 1 month ago
pull request closed
Bump qs from 6.5.2 to 6.5.3 in /examples

⚠️ 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 compatibility score

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.

Created at 1 month ago

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

Bumps qs from 6.5.2 to 6.5.3.


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>

Created at 1 month ago
delete branch
ndresx delete branch dependabot/npm_and_yarn/decode-uri-component-0.2.2
Created at 1 month ago

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.


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>

Created at 1 month ago
pull request closed
Bump decode-uri-component from 0.2.0 to 0.2.2

⚠️ 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 compatibility score

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.

Created at 1 month ago
delete branch
ndresx delete branch dependabot/npm_and_yarn/qs-6.5.3
Created at 1 month ago

Bump qs from 6.5.2 to 6.5.3 (#229)

Bumps qs from 6.5.2 to 6.5.3.


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>

Created at 1 month ago
pull request closed
Bump qs from 6.5.2 to 6.5.3

Bumps qs from 6.5.2 to 6.5.3.

Dependabot compatibility score

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.

Created at 1 month ago
delete branch
ndresx delete branch dependabot/npm_and_yarn/examples/decode-uri-component-0.2.2
Created at 1 month ago

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.


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>

Created at 1 month ago
pull request closed
Bump decode-uri-component from 0.2.0 to 0.2.2 in /examples

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot compatibility score

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.

Created at 1 month ago
issue comment
setState in onTick callback resets the countdown.

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!

Created at 1 month ago
closed issue
Countdown doesn't autoStart in React 18 functional component

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;
Created at 1 month ago
closed issue
How to start and pause in functional React

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!

Created at 1 month ago
issue comment
How to start and pause in functional React

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

Created at 1 month ago
closed issue
Maximum depth reached error

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

Created at 1 month ago
issue comment
Maximum depth reached error

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

Created at 1 month ago