react-countdown-circle-timer

Lightweight React countdown timer component with color and progress animation based on SVG

Stats

StarsIssuesVersionUpdatedCreatedSize
react-countdown-circle-timer
32502.5.4a month ago2 years agoMinified + gzip package size for react-countdown-circle-timer in KB

Readme

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

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.