react-native-moment-countdown
v0.0.2
Published
An unopinionated countdown timer component for React Native.
Downloads
11
Maintainers
Readme
react-native-moment-countdown
An unopinionated countdown component for React Native using moment.js.
Installation
$ npm install react-native-moment-countdown --save
How to use
Insert javascript Date
instance into toDate
props:
import React from 'react';
import RNMomentCountDown from 'react-moment-countdown';
export default function CountDownComponent () {
const dateInFuture = new Date('2017-12-31');
return (
<RNMomentCountDown toDate={dateInFuture} />
);
};
Insert moment
instance into toDate
props:
import React from 'react';
import RNNMomentCountDown from 'react-moment-countdown';
import moment from 'moment';
export default function CountDownComponent () {
const dateInFuture = moment('2017-12-31', 'YYYY-MM-DD');
return (
<RNMomentCountDown 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 RNMomentCountDown from 'react-moment-countdown'
render(
<RNMomentCountDown 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} />
)
}
}