rc-countdown-flip v0.1.7

demo

Install

yarn add rc-countdown-flip

Basic Usage

import FlipCountDown from "rc-countdown-flip";

<FlipCountDown
  option={{
    leftSecond: 100,
    format: "hh:mm:ss",
    end: () => {
      alert("end");
    },
    style: {
      color: "black",
      background: "white"
    },
    standard: "50px"
  }}
/>;

Attribute

Method

TIPS

1. 设置样式

样式修改主要用到两个属性 style 和 standard。
style 只支持 color 和 background。字面意思。字体颜色和背景，但是分隔符使用的是 background 需要注意。

<FlipCountDown
  option={{
    leftSecond: 86400 * 2 + 5,
    format: "dd:hh:mm:ss",
    style: {
      color: "#47858b",
      background: "#e4f4f3"
    },
    standard: "80px"
  }}
/>

2. format 使用

format 默认为 'dd:hh:mm:ss'。
区分大小写。当使用大写的时候，最大值变成 100，而不是我们常规理解中的小时 24、分钟秒 60 了。主要是为了解决如倒计时 2 天，但不想显示天的，设置 HH:mm:ss，会显示为 48:00:00。
注意 当所有的值都设置为 大写 的时候，你可以会觉得有些奇怪，看一下我上面说的，最大值为 100，你可能会理解。

<FlipCountDown
  option={{
    leftSecond: 86400 * 2 + 5,
    format: "HH:mm:ss"
  }}
/>