Unexpected Behavior with the `daysInHours` Prop

[mowhcen]

• [x] Searched for existing issues

---

Version: 2.3.5

---

Problem:

I am using version 2.3.5 and I want to display a countdown timer in the format hours : minutes : seconds. If a value greater than one day is provided to the countdown, I want it to be displayed as hours. To achieve this, I added the daysInHours prop, but it is not working as expected.

Expected Behavior:

I expect the days value to be treated as zero and calculated as hours. Here is the code snippet:

<CountDown
  daysInHours
  renderer={({ hours, minutes, days, seconds, completed }) => {
    if (completed) {
      return <span>Finished</span>;
    }
    return (
      <div className="countdown" style={{ direction: "ltr" }}>
        {days}:{hours}:{minutes}:{seconds}
      </div>
    );
  }}
  date={Date.now() + 100000000}
/>;

Link to CodeSandbox for Demo

[ndresx]

Hi, a bit late to this, but in case anyone is running into the same issue.

When using a custom renderer, the formatted output can be found in the formatted object provided to the renderer function. In this case, the raw numbers are used. Something like this should do the trick.

<CountDown
  daysInHours
  renderer={({ formatted: { hours, minutes, seconds }, completed }) => {
    if (completed) {
      return <span>Finished</span>;
    }
    return (
      <div className="countdown" style={{ direction: "ltr" }}>
        {hours}:{minutes}:{seconds}
      </div>
    );
  }}
  date={Date.now() + 100000000}
/>;