Countdown React SVG JS Library

Overview

This library provides an easy-to-use and customizable countdown timer solution fot React, written in pure JavaScript.

Getting Started

Usage

Below is a simple example demonstrating how to use Circle Countdown

import { CountdownCircle } from 'countdown-react-svg';

<CountdownCircle
    timeLeft={18}
    timeTotal={30}
    size={24}
    fromUTime={Math.floor(Date.now() / 1000)}
/>

Props

| Parameter | Type | Default Value | Description | |-------------------|---------------|---------------|---------------------------------------------------------| | timeLeft | Number | required | Seconds left in timer. | | timeTotal | Number | required | Total seconds in timer. | | size | Number | required | Size of SVG holder in pixels. | | activated | Boolean | true | Is the countdown on or off. | | fromUTime | Number / null | null | Unixtimestam for syncing the countdown start time. | | onCompleteCallback | Function | () => {} | Callback that will be fired when the countdown hit 0. | | colorMain | String | '#2563eb' | Color for the time left circle. | | colorSecond | String | '#f87171' | Color for the time passed circle. | | colorNumber | String | '#2563eb' | Color for the number (seconds left). |