{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-countdown"],"cli":null},"imports":["import Countdown from 'react-countdown';","import type { CountdownProps } from 'react-countdown';","import type { CountdownRendererFn } from 'react-countdown';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}