0.0.3 • Published 9 months ago
voothanh-react-countdown-flip v0.0.3
voothanh-react-countdown-flip
A 3D animated flip countdown component for React.
Install
npm install --save voothanh-react-countdown-flip
Or
yarn add voothanh-react-countdown-flip
Props
The FlipClockCountdown has all properties of div
and additional props below
Name | Type | Required | Default | Description |
---|---|---|---|---|
target | Date|string|number | yes | Date or timestamp in the future. | |
display | object | no | Config Timer Unit displays | |
|years | boolean | no | undefined | Display Years |
|months | boolean | no | undefined | Display Months |
|days | boolean | no | undefined | Display Days |
|hours | boolean | no | undefined | Display Hours |
|minutes | boolean | no | undefined | Display Minutes |
|seconds | boolean | no | undefined | Display Seconds |
titles | object | no | Config Unit titles | |
|years | string | no | Years | Title Years |
|months | string | no | Months | Title Months |
|days | string | no | Days | Title Days |
|hours | string | no | Hours | Title Hours |
|minutes | string | no | Minutes | Title Minutes |
|seconds | string | no | Seconds | Title Seconds |
onComplete | func | no | Callback when countdown ends |
Usage
Basic usage
import React from 'react';
import { Timer } from "voothanh-react-countdown-flip";
const Example = () => {
return <Timer target={'2026-01-17 12:00:00'}
display={{
[TimeUnit.Seconds]: true,
[TimeUnit.Hours]: true,
[TimeUnit.Minutes]: true
}}
/>;
}