@rumess/react-flip-countdown

The React Flip Countdown Component.

DEMO

Install

Using npm:

npm install @rumess/react-flip-countdown

Using yarn:

yarn add @rumess/react-flip-countdown

Usage

Basic

import React, { Component } from 'react';

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

class ExampleBasic extends Component {
    render() {
        return (
            <FlipCountdown
                endAt={'2022-12-12 01:26:58'} // Date/Time
            />
        );
    }
}

Size

import React, { Component } from 'react';

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

class ExampleSize extends Component {
    render() {
        return (
            <FlipCountdown
                size='large' // Options (Default: medium): large, medium, small, extra-small.
                endAt={'2022-12-12 01:26:58'} // Date/Time
            />
        );
    }
}

Theme

import React, { Component } from 'react';

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

class ExampleTheme extends Component {
    render() {
        return (
            <FlipCountdown
                theme='dark' // Options (Default: dark): dark, light.
                endAt={'2022-12-12 01:26:58'} // Date/Time
            />
        );
    }
}

Title Position

import React, { Component } from 'react';

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

class ExampleTitlePosition extends Component {
    render() {
        return (
            <FlipCountdown
                titlePosition='top' // Options (Default: top): top, bottom.
                endAt={'2022-12-12 01:26:58'} // Date/Time
            />
        );
    }
}

Change title

import React, { Component } from 'react';

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

class ExampleChangeTitle extends Component {
    render() {
        return (
            <FlipCountdown
                yearTitle='Year'
                monthTitle='Months'
                dayTitle='Days'
                hourTitle='Hours'
                minuteTitle='Minutes'
                secondTitle='Seconds'
                endAt={'2022-12-12 01:26:58'} // Date/Time
            />
        );
    }
}

Hide certain sections

import React, { Component } from 'react';

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

class ExampleHideSection extends Component {
    render() {
        return (
            <FlipCountdown
                hideYear
                hideMonth
                hideDay
                // hideHour
                // hideMinute
                // hideSecond
                endAt={'2022-12-12 01:26:58'} // Date/Time
            />
        );
    }
}

End as Zero

import React, { Component } from 'react';

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

class ExampleHideSection extends Component {
    render() {
        return (
            <FlipCountdown
                endAtZero
                endAt={'2022-12-12 01:26:58'} // Date/Time
            />
        );
    }
}

Time up event

import React, { Component } from 'react';

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

class ExampleHideSection extends Component {
    render() {
        return (
            <FlipCountdown
                endAt={'2022-12-12 01:26:58'} // Date/Time
                onTimeUp={() => console.log("Time's up ⏳")}
            />
        );
    }
}

License

MIT © rumess