@africasokoni/react-flip-countdown

The React Flip Countdown Component.

DEMO

Install

Using npm:

npm install @africasokoni/react-flip-countdown

Using yarn:

yarn add @africasokoni/react-flip-countdown

Usage

Basic

import React, { Component } from 'react';

import FlipCountdown from '@africasokoni/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 '@africasokoni/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 '@africasokoni/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 '@africasokoni/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 '@africasokoni/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 '@africasokoni/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 '@africasokoni/react-flip-countdown';

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

License

MIT © africasokoni