Neoanthropic Preternatural Murmurings
    Have ideas to improve npm?Join in the discussion! »

    react-countdown-circle-timer
    TypeScript icon, indicating that this package has built-in type declarations

    2.5.3 • Public • Published

    React Countdown Circle Timer

    npm Codecov npm GitHub Workflow Status npm bundle size

    React countdown timer component in a circle shape with color and progress animation.

    • Performance optimized with single requestAnimationFrame loop to animate color and progress (no setInterval used)
    • Transition between colors during the countdown
    • Support for linear gradient
    • Fully customizable content in the center of the circle
    • a11y support
    • Built-in and ready-to-use TypeScript type definitions.

    Installation

    yarn add react-countdown-circle-timer
    

    Demo

    Check the demo on CodeSandbox to get started
    Edit stoic-cache-e7cie

    Basic usage

    import { CountdownCircleTimer } from 'react-countdown-circle-timer'
    
    const UrgeWithPleasureComponent = () => (
      <CountdownCircleTimer
        isPlaying
        duration={10}
        colors={[
          ['#004777', 0.33],
          ['#F7B801', 0.33],
          ['#A30000', 0.33],
        ]}
      >
        {({ remainingTime }) => remainingTime}
      </CountdownCircleTimer>
    )

    Props

    Refer to the list of props

    Recipes

    Slide down time animation

    Check the CodeSandbox below to find out how you can implement it yourself
    Edit silly-night-d3s70

    Days, hours, minutes, seconds countdown

    Check the demo below for one possible solution
    Edit musing-davinci-mqssz

    Install

    npm i react-countdown-circle-timer

    DownloadsWeekly Downloads

    7,776

    Version

    2.5.3

    License

    MIT

    Unpacked Size

    72.1 kB

    Total Files

    7

    Last publish

    Collaborators

    • avatar