react-countdowns-svg
v0.1.3
Published
Countdowns for React
Downloads
2
Readme
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). |