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
                  }}
    />;
}