https://github.com/vydimitrov/react-countdown-circle-timer

Lightweight React/React Native countdown timer component with color and progress animation based on SVG
https://github.com/vydimitrov/react-countdown-circle-timer

android countdown countdown-animation countdown-time ios react react-native timer

Last synced: 5 months ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/vydimitrov/react-countdown-circle-timer
• Owner: vydimitrov
• License: mit
• Created: 2019-09-14T12:47:25.000Z (about 6 years ago)
• Default Branch: master
• Last Pushed: 2025-04-14T14:55:59.000Z (6 months ago)
• Last Synced: 2025-05-04T12:07:21.485Z (5 months ago)
• Topics: android, countdown, countdown-animation, countdown-time, ios, react, react-native, timer
• Language: TypeScript
• Homepage:
• Size: 1.72 MB
• Stars: 707
• Watchers: 6
• Forks: 88
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# React/React Native Countdown Circle Timer

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

  

## Features

:zap: Performance optimized with single `requestAnimationFrame` loop to animate color and progress  

:rainbow: Transition between colors during the countdown  

:european_castle: Fully customizable content in the center of the circle  

:rocket: Support iOS and Android

## React

[![npm](https://img.shields.io/npm/v/react-countdown-circle-timer)](https://www.npmjs.com/package/react-countdown-circle-timer)

[![npm](https://img.shields.io/npm/dw/react-countdown-circle-timer)](https://www.npmtrends.com/react-countdown-circle-timer)

[![Codecov](https://img.shields.io/codecov/c/github/vydimitrov/react-countdown-circle-timer?flag=web)](https://app.codecov.io/gh/vydimitrov/react-countdown-circle-timer/tree/master/packages/web/src)

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-countdown-circle-timer)](https://bundlephobia.com/result?p=react-countdown-circle-timer)

```

yarn add react-countdown-circle-timer

```

Check out the [full documentation](https://github.com/vydimitrov/react-countdown-circle-timer/tree/master/packages/web#react-countdown-circle-timer) for demos and use cases.

## React Native

[![npm](https://img.shields.io/npm/v/react-native-countdown-circle-timer)](https://www.npmjs.com/package/react-native-countdown-circle-timer)

[![npm](https://img.shields.io/npm/dw/react-native-countdown-circle-timer)](https://www.npmtrends.com/react-native-countdown-circle-timer)

[![Codecov](https://img.shields.io/codecov/c/github/vydimitrov/react-countdown-circle-timer?flag=mobile)](https://app.codecov.io/gh/vydimitrov/react-countdown-circle-timer/tree/master/packages/mobile/src)

[![npm bundle size](https://img.shields.io/bundlephobia/minzip/react-native-countdown-circle-timer)](https://bundlephobia.com/result?p=react-native-countdown-circle-timer)

```

yarn add react-native-countdown-circle-timer

```

This component has a peer dependency on `react-native-svg`. Read the [full documentation](https://github.com/vydimitrov/react-countdown-circle-timer/tree/master/packages/mobile#react-native-countdown-circle-timer) for the installation guide, as well as demos and use cases.