Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ A full rewrite of the internals: all countdown logic now lives in a framework-ag
- **`resetKey` prop** to restart the countdown without remounting (React's `key` still works to remount).
- **`freezeProps` prop** to opt out of prop tracking after mount.
- **`CountdownStatus` enum is now exported**, plus a **`getStatus()`** method on the API.
- **`refresh()`** method on the API to force an immediate recompute and re-render against the current clock (e.g. from a `visibilitychange` listener after the interval was throttled in a background tab).
- Dual **ESM + CJS** build with bundled type definitions and `sideEffects: false` for tree-shaking.

### Migrating from 2.x
Expand Down
25 changes: 24 additions & 1 deletion README.md
Original file line number Diff line number Diff line change
Expand Up @@ -344,6 +344,23 @@ Pauses the running countdown. This only works as expected if the [`controlled`](

Stops the countdown. This only works as expected if the [`controlled`](#controlled) prop is set to `false` because [`calcTimeDelta`](#calctimedelta) calculates an offset time internally.

### `refresh()`

Forces an immediate recompute of the [time delta](#calctimedelta) and a re-render against the current clock, without changing the countdown's status or offsets. This is useful when the internal interval has been throttled (for example, while the tab was in the background) and you want the displayed value to update right away instead of waiting for the next tick, e.g. from a `visibilitychange` listener:

```jsx
React.useEffect(() => {
const onVisible = () => {
if (!document.hidden) ref.current?.api.refresh();
};

document.addEventListener('visibilitychange', onVisible);
return () => document.removeEventListener('visibilitychange', onVisible);
}, []);
```

Like a regular tick, it triggers [`onTick`](#ontick); and if the recomputed time has crossed zero, it fires [`onComplete`](#oncomplete) just as the final interval tick would.

### `isStarted()`

Returns a `boolean` for whether the countdown is currently started (running) or not.
Expand Down Expand Up @@ -398,7 +415,13 @@ const renderer = ({ hours, minutes, seconds }) => (

```js
{
total, days, hours, minutes, seconds, milliseconds, completed;
total: number;
days: number;
hours: number;
minutes: number;
seconds: number;
milliseconds: number;
completed: boolean;
}
```

Expand Down
Loading