@rumess/react-flip-countdown

The React Flip Countdown Component.

DEMO

Install

Using npm:

1npm install @rumess/react-flip-countdown

Using yarn:

1yarn add @rumess/react-flip-countdown

Usage

Basic

1import React, { Component } from 'react';
2
3import FlipCountdown from '@rumess/react-flip-countdown';
4
5class ExampleBasic extends Component {
6    render() {
7        return (
8            <FlipCountdown
9                endAt={'2022-12-12 01:26:58'} // Date/Time
10            />
11        );
12    }
13}

Size

1import React, { Component } from 'react';
2
3import FlipCountdown from '@rumess/react-flip-countdown';
4
5class ExampleSize extends Component {
6    render() {
7        return (
8            <FlipCountdown
9                size='large' // Options (Default: medium): large, medium, small, extra-small.
10                endAt={'2022-12-12 01:26:58'} // Date/Time
11            />
12        );
13    }
14}

Theme

1import React, { Component } from 'react';
2
3import FlipCountdown from '@rumess/react-flip-countdown';
4
5class ExampleTheme extends Component {
6    render() {
7        return (
8            <FlipCountdown
9                theme='dark' // Options (Default: dark): dark, light.
10                endAt={'2022-12-12 01:26:58'} // Date/Time
11            />
12        );
13    }
14}

Title Position

1import React, { Component } from 'react';
2
3import FlipCountdown from '@rumess/react-flip-countdown';
4
5class ExampleTitlePosition extends Component {
6    render() {
7        return (
8            <FlipCountdown
9                titlePosition='top' // Options (Default: top): top, bottom.
10                endAt={'2022-12-12 01:26:58'} // Date/Time
11            />
12        );
13    }
14}

Change title

1import React, { Component } from 'react';
2
3import FlipCountdown from '@rumess/react-flip-countdown';
4
5class ExampleChangeTitle extends Component {
6    render() {
7        return (
8            <FlipCountdown
9                yearTitle='Year'
10                monthTitle='Months'
11                dayTitle='Days'
12                hourTitle='Hours'
13                minuteTitle='Minutes'
14                secondTitle='Seconds'
15                endAt={'2022-12-12 01:26:58'} // Date/Time
16            />
17        );
18    }
19}

Hide certain sections

1import React, { Component } from 'react';
2
3import FlipCountdown from '@rumess/react-flip-countdown';
4
5class ExampleHideSection extends Component {
6    render() {
7        return (
8            <FlipCountdown
9                hideYear
10                hideMonth
11                hideDay
12                // hideHour
13                // hideMinute
14                // hideSecond
15                endAt={'2022-12-12 01:26:58'} // Date/Time
16            />
17        );
18    }
19}

End as Zero

1import React, { Component } from 'react';
2
3import FlipCountdown from '@rumess/react-flip-countdown';
4
5class ExampleHideSection extends Component {
6    render() {
7        return (
8            <FlipCountdown
9                endAtZero
10                endAt={'2022-12-12 01:26:58'} // Date/Time
11            />
12        );
13    }
14}

Time up event

1import React, { Component } from 'react';
2
3import FlipCountdown from '@rumess/react-flip-countdown';
4
5class ExampleHideSection extends Component {
6    render() {
7        return (
8            <FlipCountdown
9                endAt={'2022-12-12 01:26:58'} // Date/Time
10                onTimeUp={() => console.log("Time's up ⏳")}
11            />
12        );
13    }
14}

License

MIT © rumess