{"id":11673,"library":"react-countdown","title":"React Countdown Component","description":"react-countdown is a highly customizable React component designed to display countdowns. It is currently stable at version 2.3.6 and has seen active maintenance, with multiple bugfix and minor feature releases within the 2.x series. The library allows developers to define a target date and provides flexible rendering options, including a custom `renderer` function or rendering a child component upon completion. Key features include support for displaying milliseconds with configurable precision, an `overtime` prop to allow negative countdowns, and an API to programmatically `stop`, `isStarted`, and `isStopped` the countdown. It ships with TypeScript types, ensuring type safety for React applications. This package differentiates itself through its extensive customization capabilities and robust API for managing countdown state.","status":"active","version":"2.3.6","language":"javascript","source_language":"en","source_url":"https://github.com/ndresx/react-countdown","tags":["javascript","react","typescript","countdown","component"],"install":[{"cmd":"npm install react-countdown","lang":"bash","label":"npm"},{"cmd":"yarn add react-countdown","lang":"bash","label":"yarn"},{"cmd":"pnpm add react-countdown","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency for React applications","package":"react","optional":false},{"reason":"Peer dependency for rendering React components","package":"react-dom","optional":false}],"imports":[{"note":"The primary component is a default export.","wrong":"import { Countdown } from 'react-countdown';","symbol":"Countdown","correct":"import Countdown from 'react-countdown';"},{"note":"Type definition for the Countdown component's props.","symbol":"CountdownProps","correct":"import type { CountdownProps } from 'react-countdown';"},{"note":"Type definition for the custom renderer function.","symbol":"CountdownRendererFn","correct":"import type { CountdownRendererFn } from 'react-countdown';"}],"quickstart":{"code":"import React from 'react';\nimport ReactDOM from 'react-dom/client';\nimport Countdown from 'react-countdown';\n\n// Create a root\nconst root = ReactDOM.createRoot(document.getElementById('root'));\n\nconst Completionist = () => <span>Time's up!</span>;\n\nconst renderer = ({ hours, minutes, seconds, completed }) => {\n  if (completed) {\n    return <Completionist />;\n  } else {\n    return <span>{hours}:{minutes}:{seconds}</span>;\n  }\n};\n\nroot.render(\n  <React.StrictMode>\n    <Countdown\n      date={Date.now() + 10000} // Countdown for 10 seconds\n      renderer={renderer}\n      onComplete={() => console.log('Countdown finished!')}\n    />\n  </React.StrictMode>\n);","lang":"typescript","description":"Demonstrates a basic countdown with a custom renderer and completion callback, using modern React 18+ ReactDOM.createRoot."},"warnings":[{"fix":"Always provide the `date` prop to the `Countdown` component. TypeScript users will encounter a compilation error if omitted.","message":"The `date` prop on the `Countdown` component transitioned from being optional to required.","severity":"breaking","affected_versions":">=2.3.3"},{"fix":"To show milliseconds, set `intervalDelay` to a value less than 1000ms (e.g., `0` or `10`) and `precision` to `1`, `2`, or `3`.","message":"Displaying milliseconds accurately requires specific `intervalDelay` and `precision` prop configurations.","severity":"gotcha","affected_versions":">=2.0.0"},{"fix":"Upgrade to version `2.3.3` or newer, which includes a fix to ensure `onComplete` triggers consistently, even if the countdown is completed on start.","message":"The `onComplete` callback might not consistently trigger immediately if the countdown `date` is already in the past at component initialization in older versions.","severity":"gotcha","affected_versions":"<2.3.3"},{"fix":"This was an internal fix. Users should ensure their project's React and TypeScript versions are up-to-date and compatible, though this change should not directly impact consumer code unless custom type overrides were in place.","message":"Internal usage of `React.Props` type was removed due to deprecation within React itself.","severity":"deprecated","affected_versions":">=2.3.6"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure the `date` prop is always provided, e.g., `<Countdown date={Date.now() + 10000} />`.","cause":"The `date` prop was made required for the `Countdown` component starting from version 2.3.3.","error":"Property 'date' is missing in type 'CountdownProps' but required in type 'Readonly<CountdownProps>'."},{"fix":"Add `intervalDelay={0}` (or a small number like `10`) and `precision={3}` (for 3 decimal places of milliseconds) to the `Countdown` component props.","cause":"Attempting to render `props.total` (milliseconds) in a custom renderer without setting `intervalDelay` and `precision` correctly.","error":"TypeError: Cannot read properties of undefined (reading 'total') (when trying to show milliseconds)"},{"fix":"Change the import statement from `import { Countdown } from 'react-countdown';` to `import Countdown from 'react-countdown';`.","cause":"Incorrectly importing `Countdown` as a named export when it is a default export.","error":"TypeError: Countdown is not a constructor (or similar errors like `_reactCountdown.Countdown is not a function`)"}],"ecosystem":"npm"}