Giter Club home page Giter Club logo

react-moment-countdown's Introduction

react-moment-countdown

An unopinionated countdown component for React using moment.js.

Installation

$ npm install react-moment-countdown --save

How to use

Insert javascript Date instance into toDate props:

   import React from 'react';
   import ReactMomentCountDown from 'react-moment-countdown';

   export default function CountDownComponent () {
     const dateInFuture = new Date('2017-12-31');

     return (
       <ReactMomentCountDown toDate={dateInFuture} />
     );
   };

Insert moment instance into toDate props:

import React from 'react';
import ReactMomentCountDown from 'react-moment-countdown';
import moment from 'moment';

export default function CountDownComponent () {
  const dateInFuture = moment('2017-12-31', 'YYYY-MM-DD');

  return (
    <ReactMomentCountDown toDate={dateInFuture} />
  );
};

Insert string value into toDate props with additional sourceFormatMask props:

The default value of sourceFormatMask props is YYYY-MM-DD.

import {render} from 'react-dom'
import ReactMomentCountDown from 'react-moment-countdown'

render(
  <ReactMomentCountDown toDate='2017-12-31 23:59:59' sourceFormatMask='YYYY-MM-DD HH:mm:ss' />,
  document.getElementById('sample-date')
)

Customize

targetFormatMask props

You can customize countdown format display with targetFormatMask props (default is 'HH:mm:ss'), for example

import {render} from 'react-dom'
import ReactMomentCountDown from 'react-moment-countdown'
import moment from 'moment'

const sampleDate = moment('2017-12-31')

render(
  <ReactMomentCountDown toDate={sampleDate} targetFormatMask='DD:HH:mm:ss' />,
  document.getElementById('sample-date')
)

onTick and onCountdownEnd props

You can add onTick function to trigger actions for every tick and onCountdownEnd to trigger actions when countdown timer has ended

import React, {PureComponent} from 'react'
import ReactMomentCountDown from 'react-moment-countdown'
import moment from 'moment'

export default class SampleClass extends PureComponent {
  constructor (props) {
    super(props)
    this.state = { endCountdown: false }
    this.sampleOnTick = this.sampleOnTick.bind(this)
    this.sampleOnCountdownEnd = this.sampleOnCountdownEnd.bind(this)
  }
  sampleOnTick (countdown) {
    this.setState({ endCountdown: countdown <= 0 })
  }
  sampleOnCountdownEnd () {
    console.log('Happy Birthday to you :)')
  }
  render () {
    const dateInFuture = moment('2017-12-31', 'YYYY-MM-DD');
    return (
      <ReactMomentCountDown toDate={dateInFuture}
        onTick={this.sampleOnTick}
        onCountdownEnd={this.sampleOnCountdownEnd} />
    )
  }
}

TO-DO

  • Add unit test
  • Add a Storybook for examples and UI tests

react-moment-countdown's People

Contributors

dependabot[bot] avatar thiagozanetti avatar dependabot-preview[bot] avatar dependabot-support avatar achmadk avatar darth-knoppix avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.