Nerdy Programmers Mingling

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

    1.2.0 • Public • Published

    @rumess/react-flip-countdown

    The React Flip Countdown Component.

    NPM JavaScript Style Guide

    DEMO

    Install

    npm install --save @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
                />
            );
        }
    }

    License

    MIT © rumess

    Install

    npm i @sekai-world/react-flip-countdown

    DownloadsWeekly Downloads

    4

    Version

    1.2.0

    License

    MIT

    Unpacked Size

    242 kB

    Total Files

    4

    Last publish

    Collaborators

    • dnaroma
    • sekai-dev