react-countdown-circle-timer

React Countdown Circle Timer

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

or

npm install react-countdown-circle-timer

Migrating from v1.x.x to v2.x.x?

There are a few small API changes to consider before switching to v2.x.x. Read Migrate to v2.x.x docs for more info.

Demo

Check the demo on CodeSandbox to get started

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

Days, hours, minutes, seconds countdown

Check the demo below for one possible solution

Changelog

2.3.7 (2020-07-24)

Note: Configure Github action to release using Lerna. No changes on component code.