### Install React Countdown with npm

Source: https://github.com/ndresx/react-countdown/blob/master/README.md

Installs the react-countdown component using npm. This is the initial step to integrate the countdown functionality into a React project.

```sh
npm install react-countdown --save
```

--------------------------------

### Basic Countdown Example in React

Source: https://github.com/ndresx/react-countdown/blob/master/README.md

Demonstrates the basic usage of the Countdown component in React. It renders a countdown that starts from 10 seconds. Requires React and ReactDOM.

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import Countdown from 'react-countdown';

ReactDOM.render(
  <Countdown date={Date.now() + 10000} />,
  document.getElementById('root')
);
```

--------------------------------

### Install React Countdown with yarn

Source: https://github.com/ndresx/react-countdown/blob/master/README.md

Installs the react-countdown component using yarn. This provides an alternative method for adding the countdown functionality to a React project.

```sh
yarn add react-countdown
```

--------------------------------

### Countdown Component API Methods

Source: https://github.com/ndresx/react-countdown/blob/master/README.md

The React Countdown component exposes an API for programmatic control. Methods like start(), pause(), stop(), isPaused(), and isStopped() allow external manipulation of the countdown's state. These can be accessed via a ref or as part of the render props.

```javascript
start()
pause()
stop()
isPaused()
isStopped()
```

--------------------------------

### Programmatic Countdown Control with Ref API

Source: https://context7.com/ndresx/react-countdown/llms.txt

Control countdown state (start, pause, stop, reset) using component ref and CountdownApi interface. Provides methods to query countdown status (isPaused, isCompleted, isStarted). The ref pattern allows imperative control alongside reactive state management in class components.

```jsx
import React, { Component } from 'react';
import Countdown, { CountdownApi } from 'react-countdown';

class CountdownController extends Component {
  countdownApi = null;
  state = { date: Date.now() + 10000 };

  setRef = (countdown) => {
    if (countdown) {
      this.countdownApi = countdown.getApi();
    }
  };

  handleStart = () => {
    this.countdownApi && this.countdownApi.start();
  };

  handlePause = () => {
    this.countdownApi && this.countdownApi.pause();
  };

  handleStop = () => {
    this.countdownApi && this.countdownApi.stop();
  };

  handleReset = () => {
    this.setState({ date: Date.now() + 10000 });
  };

  render() {
    const isPaused = this.countdownApi?.isPaused() || false;
    const isCompleted = this.countdownApi?.isCompleted() || false;
    const isStarted = this.countdownApi?.isStarted() || false;

    return (
      <div>
        <Countdown
          key={this.state.date}
          ref={this.setRef}
          date={this.state.date}
          autoStart={false}
        />
        <button onClick={this.handleStart} disabled={isStarted || isCompleted}>
          Start
        </button>
        <button onClick={this.handlePause} disabled={isPaused || isCompleted}>
          Pause
        </button>
        <button onClick={this.handleStop}>Stop</button>
        <button onClick={this.handleReset}>Reset</button>
      </div>
    );
  }
}
```

--------------------------------

### Setting Countdown Date

Source: https://github.com/ndresx/react-countdown/blob/master/README.md

The 'date' prop is mandatory and accepts a Date object, a string representation of a date, or a timestamp in milliseconds. This prop defines the target future date for the countdown. Examples include ISO date strings, Unix timestamps, and Date objects.

```javascript
import Countdown from 'react-countdown';

// Example 1: Using a Date string
<Countdown date="2024-12-31T23:59:59" />

// Example 2: Using a timestamp in milliseconds
<Countdown date={1735689599000} />

// Example 3: Using a Date object
<Countdown date={new Date(1735689599000)} />
```

--------------------------------

### Use zeroPad Helper Function with Various Configurations

Source: https://context7.com/ndresx/react-countdown/llms.txt

Demonstrate zeroPad utility function for formatting numbers and strings with configurable padding. The function supports custom lengths, preserves value integrity when length is insufficient, and works with prefixes/suffixes embedded in strings.

```javascript
import { zeroPad } from 'react-countdown';

// Basic padding
console.log(zeroPad(5));           // "05"
console.log(zeroPad(5, 3));        // "005"
console.log(zeroPad(100, 2));      // "100" (no truncation)

// String padding
console.log(zeroPad("7", 4));      // "0007"

// With prefix/suffix
console.log(zeroPad("T5s", 3));    // "T005s"

// No padding
console.log(zeroPad(5, 0));        // "5"
```

--------------------------------

### Advanced Countdown Rendering and Callbacks

Source: https://github.com/ndresx/react-countdown/blob/master/README.md

The 'renderer' prop allows for custom rendering of the countdown output. Event callbacks like 'onMount', 'onStart', 'onPause', 'onStop', 'onTick', and 'onComplete' provide hooks into the countdown's lifecycle, enabling dynamic updates and actions.

```javascript
import Countdown from 'react-countdown';

const CustomRenderer = ({ hours, minutes, seconds, completed }) => {
  if (completed) {
    return <span>Countdown Complete!</span>;
  } else {
    return <span>{hours}:{minutes}:{seconds}</span>;
  }
};

<Countdown
  date={Date.now() + 10000}
  renderer={CustomRenderer}
  onComplete={() => console.log('Countdown finished!')}
  onTick={({ seconds }) => console.log(`Tick: ${seconds} seconds remaining`)}
/>
```

--------------------------------

### Import Core React Countdown Component

Source: https://github.com/ndresx/react-countdown/blob/master/README.md

This import statement brings in the main Countdown component from the 'react-countdown' library, along with its essential helper functions for use within React applications.

```javascript
import Countdown, { zeroPad, calcTimeDelta, formatTimeDelta } from 'react-countdown';
```

--------------------------------

### Apply Custom Formatting with zeroPad Helper Function

Source: https://context7.com/ndresx/react-countdown/llms.txt

Use the zeroPad utility function to create custom formatted countdown displays with specific padding requirements. The function accepts a value and optional length parameter, supports strings and numbers, and preserves non-numeric characters while padding numeric portions.

```jsx
import React from 'react';
import Countdown, { zeroPad } from 'react-countdown';

function CustomFormattedCountdown() {
  const renderer = ({ days, hours, minutes, seconds }) => {
    return (
      <div>
        {days > 0 && <span>{zeroPad(days, 3)} days </span>}
        <span>{zeroPad(hours)}h </span>
        <span>{zeroPad(minutes)}m </span>
        <span>{zeroPad(seconds)}s</span>
      </div>
    );
  };

  return <Countdown date={Date.now() + 86400000} renderer={renderer} />;
}

export default CustomFormattedCountdown;
```

--------------------------------

### Zero-Pad Numbers (zeroPad)

Source: https://github.com/ndresx/react-countdown/blob/master/README.md

The `zeroPad` function formats a number or string by adding leading zeros to meet a specified length, defaulting to 2. This is useful for consistent time display.

```javascript
import { zeroPad } from 'react-countdown';

// Example usage:
const renderer = ({ hours, minutes, seconds }) => (
  <span>
    {zeroPad(hours)}:{zeroPad(minutes)}:{zeroPad(seconds)}
  </span>
);

// Example output: zeroPad(5) => "05"
```

--------------------------------

### Controlling Countdown Behavior

Source: https://github.com/ndresx/react-countdown/blob/master/README.md

The 'controlled', 'autoStart', and 'key' props manage the countdown's execution flow. 'controlled' allows parent components to manage the countdown state. 'autoStart' determines if the countdown begins immediately. A unique 'key' can be used to reset the countdown.

```javascript
import Countdown from 'react-countdown';

// Example 1: Auto-start disabled
<Countdown date={Date.now() + 10000} autoStart={false} />

// Example 2: Controlled countdown (requires manual start/pause logic)
<Countdown date={Date.now() + 10000} controlled />

// Example 3: Resetting countdown with a new key
<Countdown key={someCounterValue} date={Date.now() + 10000} />
```

--------------------------------

### React Countdown with Custom Completion Component

Source: https://github.com/ndresx/react-countdown/blob/master/README.md

Shows how to use a React child component to display content when the countdown completes. The Completionist component is rendered upon countdown completion. Requires React and ReactDOM.

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import Countdown from 'react-countdown';

// Random component
const Completionist = () => <span>You are good to go!</span>;

ReactDOM.render(
  (
    <Countdown date={Date.now() + 5000}>
      <Completionist />
    </Countdown>
  ),
  document.getElementById('root')
);
```

--------------------------------

### Basic Countdown Timer in React

Source: https://context7.com/ndresx/react-countdown/llms.txt

Demonstrates basic usage of the Countdown component to display time remaining from a future date. Supports Date objects, date strings, and milliseconds since epoch. The default output format is DD:HH:MM:SS or HH:MM:SS.

```jsx
import React from 'react';
import ReactDOM from 'react-dom';
import Countdown from 'react-countdown';

// Basic countdown from 10 seconds
ReactDOM.render(
  <Countdown date={Date.now() + 10000} />,
  document.getElementById('root')
);

// Using a specific date string
ReactDOM.render(
  <Countdown date="2025-12-31T23:59:59" />,
  document.getElementById('root')
);

// Using a Date object
const targetDate = new Date('2025-12-31T23:59:59');
ReactDOM.render(
  <Countdown date={targetDate} />,
  document.getElementById('root')
);

// Output format: DD:HH:MM:SS or HH:MM:SS (when days are 0)
```

--------------------------------

### Configure Zero-Padding and Number Formatting Options

Source: https://context7.com/ndresx/react-countdown/llms.txt

Customize countdown display formatting using zeroPadTime, zeroPadDays, and daysInHours props. Control whether numbers are zero-padded (01:01:01 vs 1:1:1), extend padding for hours/days, and convert day units to hours format for different display needs.

```jsx
import React from 'react';
import Countdown from 'react-countdown';

// No zero-padding
function MinimalCountdown() {
  return (
    <Countdown
      date={Date.now() + 3661000}
      zeroPadTime={0}
    />
  );
}

// Extended zero-padding for hours
function ExtendedCountdown() {
  return (
    <Countdown
      date={Date.now() + 3600000 * 100}
      zeroPadTime={3}
      zeroPadDays={3}
    />
  );
}

// Display days as hours
function DaysInHoursCountdown() {
  return (
    <Countdown
      date={Date.now() + 86400000 * 2.5}
      daysInHours={true}
    />
  );
}

export { MinimalCountdown, ExtendedCountdown, DaysInHoursCountdown };
```

--------------------------------

### Customizing Countdown Display

Source: https://github.com/ndresx/react-countdown/blob/master/README.md

Props like 'zeroPadTime', 'zeroPadDays', and 'daysInHours' allow for fine-grained control over the countdown's display format. 'zeroPadTime' controls padding for hours, minutes, and seconds, while 'zeroPadDays' does the same for days. 'daysInHours' displays the total duration in hours.

```javascript
import Countdown from 'react-countdown';

// Example 1: Standard zero-padding (default)
<Countdown date={Date.now() + 100000} zeroPadTime={2} />

// Example 2: Custom zero-padding for days
<Countdown date={Date.now() + 86400000} zeroPadDays={3} />

// Example 3: Displaying total days in hours
<Countdown date={Date.now() + 86400000} daysInHours />
```

--------------------------------

### React Children for Countdown Completion in React

Source: https://context7.com/ndresx/react-countdown/llms.txt

Illustrates using React children as a way to display custom content when the Countdown component finishes. This approach is simpler than a custom renderer for basic completion messages and is ignored if a `renderer` prop is provided.

```jsx
import React from 'react';
import Countdown from 'react-countdown';

const Completionist = () => (
  <div className="completion-message">
    <h2>🎉 Countdown Complete!</h2>
    <p>The event has started.</p>
  </div>
);

function App() {
  return (
    <div>
      <h1>Event Starts In:</h1>
      <Countdown date={Date.now() + 5000}>
        <Completionist />
      </Countdown>
    </div>
  );
}

// During countdown: displays "00:00:05" (default format)
// After completion: displays <Completionist /> component
// Note: children prop ignored if custom renderer is provided
```

--------------------------------

### Countdown Component Render Props

Source: https://github.com/ndresx/react-countdown/blob/master/README.md

The 'renderer' prop allows for custom rendering of the countdown. It receives a render props object containing time delta, API, props, and formatted time. This object is used to display the countdown's state.

```javascript
{
  total: 0,
  days: 0,
  hours: 0,
  minutes: 0,
  seconds: 0,
  milliseconds: 0,
  completed: true,
  api: { ... },
  props: { ... },
  formatted: { ... }
}
```

--------------------------------

### Format Time Delta Object (formatTimeDelta)

Source: https://github.com/ndresx/react-countdown/blob/master/README.md

The `formatTimeDelta` function takes a time delta object (typically from `calcTimeDelta`) and formats it into a more human-readable structure, standardizing days, hours, minutes, and seconds. Options allow customization like treating days as hours and controlling zero-padding.

```javascript
import { calcTimeDelta, formatTimeDelta } from 'react-countdown';

// Example usage:
const endDate = new Date(Date.now() + 10000);
const timeDelta = calcTimeDelta(endDate);
const formattedTime = formatTimeDelta(timeDelta);

// formattedTime object structure:
// { days: '00', hours: '00', minutes: '00', seconds: '00' }
console.log(formattedTime);
```

--------------------------------

### React Countdown with Custom Renderer and Completion Logic

Source: https://github.com/ndresx/react-countdown/blob/master/README.md

Implements a custom renderer function for the Countdown component. It conditionally renders a completion message or the remaining time. Requires React and ReactDOM.

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import Countdown from 'react-countdown';

// Random component
const Completionist = () => <span>You are good to go!</span>;

// Renderer callback with condition
const renderer = ({ hours, minutes, seconds, completed }) => {
  if (completed) {
    // Render a completed state
    return <Completionist />;
  } else {
    // Render a countdown
    return <span>{hours}:{minutes}:{seconds}</span>;
  }
};

ReactDOM.render(
  <Countdown
    date={Date.now() + 5000}
    renderer={renderer}
  />,
  document.getElementById('root')
);
```

--------------------------------

### React Countdown in Milliseconds with Custom Renderer

Source: https://github.com/ndresx/react-countdown/blob/master/README.md

Configures the Countdown component to display total time in milliseconds. This involves setting `intervalDelay` to 0, `precision` to 3, and using a custom renderer. Requires React and ReactDOM.

```javascript
import React from 'react';
import ReactDOM from 'react-dom';
import Countdown from 'react-countdown';

ReactDOM.render(
  <Countdown
    date={Date.now() + 10000}
    intervalDelay={0}
    precision={3}
    renderer={props => <div>{props.total}</div>}
  />,
  document.getElementById('root')
);
```

--------------------------------

### Create Overtime Countdown with Negative Time Display

Source: https://context7.com/ndresx/react-countdown/llms.txt

Build a countdown that continues past zero into negative time using the overtime prop. Implement a custom renderer to display negative totals with a different prefix (T+ vs T-). The completed flag triggers when passing zero while counting continues indefinitely.

```jsx
import React from 'react';
import Countdown from 'react-countdown';

function OvertimeCountdown() {
  const renderer = ({ total, hours, minutes, seconds, completed, formatted }) => {
    const isNegative = total < 0;
    const prefix = isNegative ? 'T+' : 'T-';

    return (
      <div>
        <div className={isNegative ? 'overtime' : 'countdown'}>
          {prefix} {formatted.hours}:{formatted.minutes}:{formatted.seconds}
        </div>
        {completed && <div className="notice">Launch event occurred!</div>}
      </div>
    );
  };

  return (
    <Countdown
      date={Date.now() + 5000}
      overtime={true}
      renderer={renderer}
    />
  );
}

export default OvertimeCountdown;
```

--------------------------------

### Custom Countdown Rendering in React

Source: https://context7.com/ndresx/react-countdown/llms.txt

Shows how to override the default rendering of the Countdown component using a custom renderer function. This function receives detailed time delta and formatting props, allowing for conditional display logic and custom styling. A completion component can also be rendered when the countdown finishes.

```jsx
import React from 'react';
import Countdown from 'react-countdown';

// Completionist component shown when countdown ends
const Completionist = () => <span>Time's up! You are good to go!</span>;

// Custom renderer with full control over display
const customRenderer = ({ days, hours, minutes, seconds, completed, total, formatted }) => {
  if (completed) {
    return <Completionist />;
  }

  // Access raw values
  return (
    <div style={{ fontSize: '2em', color: total < 10000 ? 'red' : 'black' }}>
      {days > 0 && <span>{formatted.days} days </span>}
      <span>{formatted.hours}:</span>
      <span>{formatted.minutes}:</span>
      <span>{formatted.seconds}</span>
    </div>
  );
};

// Using the custom renderer
function App() {
  return (
    <Countdown
      date={Date.now() + 86400000} // 24 hours
      renderer={customRenderer}
    />
  );
}

// Render props object structure:
// {
//   total: 86400000,           // milliseconds remaining
//   days: 1,                   // days component
//   hours: 0,                  // hours component (0-23)
//   minutes: 0,                // minutes component (0-59)
//   seconds: 0,                // seconds component (0-59)
//   milliseconds: 0,           // milliseconds component
//   completed: false,          // whether countdown finished
//   api: {...},                // control API
//   props: {...},              // component props
//   formatted: {               // zero-padded strings
//     days: '01',
//     hours: '00',
//     minutes: '00',
//     seconds: '00'
//   }
// }
```

--------------------------------

### Countdown Lifecycle Callbacks with Event Hooks

Source: https://context7.com/ndresx/react-countdown/llms.txt

Hook into countdown lifecycle events using callback props (onMount, onStart, onPause, onStop, onTick, onComplete). Each callback receives a timeDelta object containing time breakdown (days, hours, minutes, seconds, milliseconds, total). The onTick callback only fires when controlled=false and fires at regular intervals (default 1000ms).

```jsx
import React from 'react';
import Countdown from 'react-countdown';

function CountdownWithCallbacks() {
  const handleMount = (timeDelta) => {
    console.log('Countdown mounted', timeDelta);
  };

  const handleStart = (timeDelta) => {
    console.log('Countdown started', timeDelta);
  };

  const handlePause = (timeDelta) => {
    console.log('Countdown paused', timeDelta);
  };

  const handleStop = (timeDelta) => {
    console.log('Countdown stopped', timeDelta);
  };

  const handleTick = (timeDelta) => {
    console.log('Tick:', timeDelta.total, 'ms remaining');
  };

  const handleComplete = (timeDelta, completedOnStart) => {
    console.log('Countdown completed!', timeDelta);
    console.log('Completed on start:', completedOnStart);
  };

  return (
    <Countdown
      date={Date.now() + 10000}
      onMount={handleMount}
      onStart={handleStart}
      onPause={handlePause}
      onStop={handleStop}
      onTick={handleTick}
      onComplete={handleComplete}
    />
  );
}
```

--------------------------------

### High-Precision Millisecond Countdown Display

Source: https://context7.com/ndresx/react-countdown/llms.txt

Display millisecond-level precision in countdown by configuring intervalDelay and precision props. Set intervalDelay={0} for fastest updates and precision prop (0-20) to control millisecond rounding. The renderer function receives timeDelta with milliseconds component for custom formatting of high-precision countdowns.

```jsx
import React from 'react';
import Countdown from 'react-countdown';

function MillisecondCountdown() {
  const renderer = ({ total, milliseconds, seconds, minutes, hours }) => {
    return (
      <div className="millisecond-display">
        <span>{String(hours).padStart(2, '0')}:</span>
        <span>{String(minutes).padStart(2, '0')}:</span>
        <span>{String(seconds).padStart(2, '0')}.</span>
        <span className="milliseconds">{String(milliseconds).padStart(3, '0')}</span>
        <div className="total">Total: {total}ms</div>
      </div>
    );
  };

  return (
    <Countdown
      date={Date.now() + 10000}
      intervalDelay={0}
      precision={3}
      renderer={renderer}
    />
  );
}
```

--------------------------------

### Implement Controlled Countdown with External State Management

Source: https://context7.com/ndresx/react-countdown/llms.txt

Create a countdown component where the parent component manages the date prop and timing interval externally. The controlled prop treats the date as time remaining rather than an endpoint, allowing full control over countdown behavior. Parent manages interval updates while onComplete still fires appropriately.

```jsx
import React, { Component } from 'react';
import Countdown from 'react-countdown';

class ControlledCountdown extends Component {
  state = { timeRemaining: 10000 }; // milliseconds
  interval = null;

  componentDidMount() {
    this.interval = setInterval(() => {
      this.setState(prev => {
        const newTime = prev.timeRemaining - 1000;
        if (newTime <= 0) {
          clearInterval(this.interval);
          return { timeRemaining: 0 };
        }
        return { timeRemaining: newTime };
      });
    }, 1000);
  }

  componentWillUnmount() {
    clearInterval(this.interval);
  }

  render() {
    return (
      <div>
        <h3>Externally Controlled Timer</h3>
        {this.state.timeRemaining > 0 ? (
          <Countdown
            date={this.state.timeRemaining}
            controlled={true}
          />
        ) : (
          <span>Completed!</span>
        )}
      </div>
    );
  }
}

export default ControlledCountdown;
```

--------------------------------

### Format Time Difference with formatTimeDelta

Source: https://context7.com/ndresx/react-countdown/llms.txt

Formats a time delta object into zero-padded string values for days, hours, minutes, and seconds. Supports custom zero-padding for time and days, displaying days as hours, and disabling padding.

```javascript
import { calcTimeDelta, formatTimeDelta } from 'react-countdown';

// Get time delta
const delta = calcTimeDelta(Date.now() + 90061000); // 1 day, 1 hour, 1 minute, 1 second

// Basic formatting
const formatted = formatTimeDelta(delta);
console.log(formatted);
// { days: '01', hours: '01', minutes: '01', seconds: '01' }

// Custom zero-padding
const formatted2 = formatTimeDelta(delta, {
  zeroPadTime: 3,
  zeroPadDays: 4
});
console.log(formatted2);
// { days: '0001', hours: '001', minutes: '01', seconds: '01' }

// Days as hours
const formatted3 = formatTimeDelta(delta, { daysInHours: true });
console.log(formatted3);
// { days: '', hours: '25', minutes: '01', seconds: '01' } // 24 + 1

// No padding
const formatted4 = formatTimeDelta(delta, { zeroPadTime: 0 });
console.log(formatted4);
// { days: '1', hours: '1', minutes: '1', seconds: '1' }

// Usage in component
function CustomCountdown() {
  const renderer = (props) => {
    const formatted = formatTimeDelta(props, {
      daysInHours: true,
      zeroPadTime: 2
    });
    return <span>{formatted.hours}:{formatted.minutes}:{formatted.seconds}</span>;
  };

  return <Countdown date={Date.now() + 10000} renderer={renderer} />;
}
```

--------------------------------

### Calculate Time Difference (calcTimeDelta)

Source: https://github.com/ndresx/react-countdown/blob/master/README.md

The `calcTimeDelta` function computes the time difference between an end date and the current time. It returns a detailed time delta object including total milliseconds, days, hours, minutes, seconds, milliseconds, and a completed status. Optional arguments allow customization of the 'now' function, precision, controlled environment, offset time, and overtime behavior.

```javascript
import { calcTimeDelta } from 'react-countdown';

// Example usage:
const endDate = new Date(Date.now() + 10000);
const timeDelta = calcTimeDelta(endDate);

// timeDelta object structure:
// { total, days, hours, minutes, seconds, milliseconds, completed }
console.log(timeDelta);
```

--------------------------------

### Calculate Time Difference with calcTimeDelta

Source: https://context7.com/ndresx/react-countdown/llms.txt

Calculates the time difference between a target date and the current time, returning a time delta object. Supports custom 'now' functions for testing, precision control, controlled mode where the date is a duration, offset time, and overtime for negative values.

```javascript
import { calcTimeDelta } from 'react-countdown';

// Basic calculation
const delta = calcTimeDelta(Date.now() + 86400000);
console.log(delta);
// { total: 86400000, days: 1, hours: 0, minutes: 0, seconds: 0, milliseconds: 0, completed: false }

// With custom now function (useful for testing)
const customNow = () => new Date('2025-01-01T00:00:00').getTime();
const deltaCustom = calcTimeDelta('2025-01-02T00:00:00', { now: customNow });
console.log(deltaCustom.days); // 1

// High precision
const deltaPrecise = calcTimeDelta(Date.now() + 10123, { precision: 3 });
console.log(deltaPrecise.total);        // 10123
console.log(deltaPrecise.milliseconds); // 123

// Controlled mode (date is time difference, not endpoint)
const deltaControlled = calcTimeDelta(5000, { controlled: true });
console.log(deltaControlled.seconds); // 5

// With offset time (internal state management)
const deltaOffset = calcTimeDelta(Date.now() + 10000, {
  offsetTime: 2000  // Adds 2 seconds to calculation
});

// Overtime (allows negative values)
const deltaOvertime = calcTimeDelta(Date.now() - 5000, { overtime: true });
console.log(deltaOvertime.total);     // -5000 (negative)
console.log(deltaOvertime.completed); // true
```

--------------------------------

### Check Countdown Completion Status (isCompleted)

Source: https://github.com/ndresx/react-countdown/blob/master/README.md

The `isCompleted` function returns a boolean indicating if the countdown has finished. It will always return false if the overtime prop is true, though the overtime countdown's completion can be checked via the time delta object's 'completed' value.

```javascript
import Countdown, { isCompleted } from 'react-countdown';

// Example usage:
const MyComponent = () => (
  <Countdown date={Date.now() + 5000} renderer={({ completed }) => (
    <div>{completed ? 'Countdown finished!' : 'Countdown running...'}
    <p>Is completed: {isCompleted() ? 'Yes' : 'No'}</p>
    </div>
  )} />
);

export default MyComponent;
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.