Date|string|number|required|[`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) or timestamp in the future|
-|[**key**](#key)|string|number|`undefined`|React [`key`](https://reactjs.org/docs/lists-and-keys.html#keys); can be used to restart the countdown|
-|[**daysInHours**](#daysinhours)|`boolean`|`false`|Days are calculated as hours|
-|[**zeroPadTime**](#zeropadtime)|`number`|`2`|Length of zero-padded output, e.g.: `00:01:02`|
-|[**zeroPadDays**](#zeropaddays)|`number`|`zeroPadTime`|Length of zero-padded days output, e.g.: `01`|
-|[**controlled**](#controlled) |`boolean`|`false`|Hands over the control to its parent(s)|
-|[**intervalDelay**](#intervaldelay)|`number`|`1000`|Interval delay in milliseconds|
-|[**precision**](#precision)|`number`|`0`|The precision on a millisecond basis|
-|[**autoStart**](#autostart)|`boolean`|`true`|Countdown auto-start option|
-|[**overtime**](#overtime) |`boolean`|`false`|Counts down to infinity|
-|[**children**](#children)|`any`|`null`|A React child for the countdown's completed state|
-|[**renderer**](#renderer)|`function`|`undefined`|Custom renderer callback|
-|[**now**](#now)|`function`|`Date.now`|Alternative handler for the current date|
-|[**onMount**](#onmount)|`function`|`undefined`|Callback when component mounts|
-|[**onStart**](#onstart)|`function`|`undefined`|Callback when countdown starts|
-|[**onPause**](#onpause)|`function`|`undefined`|Callback when countdown pauses|
-|[**onStop**](#onstop)|`function`|`undefined`|Callback when countdown stops|
-|[**onTick**](#ontick)|`function`|`undefined`|Callback on every interval tick (`controlled` = `false`)|
-|[**onComplete**](#oncomplete)|`function`|`undefined`|Callback when countdown ends|
+| Name | Type | Default | Description |
+| :---------------------------------- | :---------------------------------------: | :-----------: | :------------------------------------------------------------------------------------------------------------------------- |
+| [**date**](#date) | Date|string|number | required | [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) or timestamp in the future |
+| [**daysInHours**](#daysinhours) | `boolean` | `false` | Days are calculated as hours |
+| [**zeroPadTime**](#zeropadtime) | `number` | `2` | Length of zero-padded output, e.g.: `00:01:02` |
+| [**zeroPadDays**](#zeropaddays) | `number` | `zeroPadTime` | Length of zero-padded days output, e.g.: `01` |
+| [**controlled**](#controlled) | `boolean` | `false` | Hands over the control to its parent(s) |
+| [**intervalDelay**](#intervaldelay) | `number` | `1000` | Interval delay in milliseconds |
+| [**precision**](#precision) | `number` | `0` | The precision on a millisecond basis |
+| [**autoStart**](#autostart) | `boolean` | `true` | Countdown auto-start option |
+| [**overtime**](#overtime) | `boolean` | `false` | Counts down to infinity |
+| [**renderer**](#renderer)\* | `function` | `undefined` | Custom renderer callback |
+| [**now**](#now) | `function` | `Date.now` | Alternative handler for the current date |
+| [**freezeProps**](#freezeprops) | `boolean` | `false` | Ignore all prop changes after mount |
+| [**resetKey**](#resetkey) | string|number | `undefined` | Change this value to restart the countdown (component + Hook) |
+| [**onMount**](#onmount) | `function` | `undefined` | Callback when component mounts |
+| [**onStart**](#onstart) | `function` | `undefined` | Callback when countdown starts |
+| [**onPause**](#onpause) | `function` | `undefined` | Callback when countdown pauses |
+| [**onStop**](#onstop) | `function` | `undefined` | Callback when countdown stops |
+| [**onTick**](#ontick) | `function` | `undefined` | Callback on every interval tick (`controlled` = `false`) |
+| [**onComplete**](#oncomplete) | `function` | `undefined` | Callback when countdown ends |
+
+\*Not used by the [`useCountdown`](#hook).
### `date`
+
The `date` prop is the only required one and can be a [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object, `string`, or timestamp in the future. By default, this date is compared with the current date, or a custom handler defined via [`now`](#now).
Valid values can be _(and more)_:
-* `'2020-02-01T01:02:03'` // [`Date` time string format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#Date_Time_String_Format)
-* `1580518923000` // Timestamp in milliseconds
-* `new Date(1580518923000)` // [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object
-### `key`
-This is one of React's internal component props to help identify elements throughout the reconciliation process. It can be used to restart the countdown by
-passing in a new `string` or `number` value.
-
-Please see [official React docs](https://reactjs.org/docs/lists-and-keys.html#keys) for more information about keys.
+- `'2020-02-01T01:02:03'` // [`Date` time string format](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse#Date_Time_String_Format)
+- `1580518923000` // Timestamp in milliseconds
+- `new Date(1580518923000)` // [`Date`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date) object
### `daysInHours`
-Defines whether the time of day should be calculated as hours rather than separated days.
-### `controlled`
-Can be useful if the countdown's interval and/or date control should be handed over to the parent. In case `controlled` is `true`, the
-provided [`date`](#date) will be treated as the countdown's actual time difference and not be compared to [`now`](#now) anymore.
+Defines whether the time of day should be calculated as hours rather than separated days.
### `zeroPadTime`
-This option defaults to `2` in order to display the common format `00:00:00` instead of `0:0:0`. If the value is higher than `2`, only the hours part _(see [`zeroPadDays`](#zeropaddays) for days)_ will be zero-padded while it stays at `2` for minutes as well as seconds. If the value is lower, the output won't be zero-padded like the example before is showing.
+
+This option defaults to `2` in order to display the common format `00:00:00` instead of `0:0:0`. Minutes and seconds are always capped at a padding width of `2`. A value higher than `2` only widens the leading field: the hours when [`daysInHours`](#daysinhours) is `true` (since hours then absorb the days and can exceed `99`), otherwise the separate days field _(see [`zeroPadDays`](#zeropaddays))_. If the value is lower, the output won't be zero-padded like the example before is showing.
### `zeroPadDays`
+
Defaults to `zeroPadTime`. It works the same way as [`zeroPadTime`](#zeropadtime) does, just for days.
+### `controlled`
+
+Can be useful if the countdown's interval and/or date control should be handed over to the parent. In case `controlled` is `true`, the
+provided [`date`](#date) will be treated as the countdown's actual time difference and not be compared to [`now`](#now) anymore.
+
### `intervalDelay`
-Since this countdown is based on date comparisons, the default value of `1000` milliseconds is probably enough for most scenarios and doesn't need to be changed.
-However, if it needs to be more precise, the `intervalDelay` can be set to something lower - down to `0`, which would, for example, allow showing the milliseconds in a more fancy way (_currently_ only possible through a custom [`renderer`](#renderer)).
+Defaults to `1000`ms. With higher [`precision`](#precision), the `intervalDelay` could be set to something lower - down to `0`, which would, for example, allow showing the milliseconds in a more fancy way (only possible by using a custom [`renderer`](#renderer)).
### `precision`
+
In certain cases, you might want to base off the calculations on a millisecond basis. The `precision` prop, which defaults to `0`, can be used to refine this calculation. While the default value simply strips the milliseconds part (e.g., `10123`ms => `10000`ms), a precision of `3` leads to `10123`ms.
### `autoStart`
+
Defines whether the countdown should start automatically or not. Defaults to `true`.
### `overtime`
+
Defines whether the countdown can go into overtime by extending its lifetime past the targeted endpoint. Defaults to `false`.
When set to `true`, the countdown timer won't stop when hitting 0, but instead becomes negative and continues to run unless paused/stopped. The [`onComplete`](#oncomplete) callback would still get triggered when the initial countdown phase completes.
-> Please note that the [`children`](#children) prop will be ignored if `overtime` is `true`. Also, when using a custom [`renderer`](#renderer), you'll have to check one of the [render props](#render-props), e.g., `total`, or `completed`, to render the overtime output.
-
-### `children`
-This component also considers the child that may live within the `overtime)
- overtime)
+ overtime starting at zero)
+ useCountdown)
+