@acrool/react-flip-countdown
TypeScript icon, indicating that this package has built-in type declarations

0.0.2 • Public • Published

Acrool React Flip Countdown

Acrool React Block Logo

A simple and animated flip countdown timer for React.

NPM npm npm

npm downloads npm

Features

  • Flip animation for hours, minutes, and seconds
  • Support endTime as countdown target
  • Supports 3-digit hours: the display shows 99, and starts flipping down when the hour drops below 99
  • Lightweight and easy to use

Install

yarn add @acrool/react-flip-countdown

Usage

add in your index.tsx

import "@acrool/react-flip-countdown/dist/index.css";

then in your page

import FlipCountdown from '@acrool/react-flip-countdown';

const Example = () => {
    
    return (
        <FlipCountdown endTime="2025/05/05 18:50:53"/>
    );
};

There is also a example that you can play with it:

Play react-editext-example

Props

Prop Type Default Required Description
endTime string Yes Countdown target time. Accepts a date string or a format supported by dayjs

License

MIT © Acrool

Package Sidebar

Install

npm i @acrool/react-flip-countdown

Weekly Downloads

6

Version

0.0.2

License

MIT

Unpacked Size

41 kB

Total Files

16

Last publish

Collaborators

  • imagine10255