The React Flip Countdown Component
npm install @rumess/react-flip-countdown> The React Flip Countdown Component.
[![NPM Version][npm-image]][npm-url]
[![NPM Downloads][downloads-image]][downloads-url]
[![JavaScript Style Guide][coding-image]][coding-url]
Using npm:
``bash`
npm install @rumess/react-flip-countdown
Using yarn:
`bash`
yarn add @rumess/react-flip-countdown
`jsx
import React, { Component } from 'react';
import FlipCountdown from '@rumess/react-flip-countdown';
class ExampleBasic extends Component {
render() {
return (
/>
);
}
}
`
`jsx
import React, { Component } from 'react';
import FlipCountdown from '@rumess/react-flip-countdown';
class ExampleSize extends Component {
render() {
return (
endAt={'2022-12-12 01:26:58'} // Date/Time
/>
);
}
}
`
`jsx
import React, { Component } from 'react';
import FlipCountdown from '@rumess/react-flip-countdown';
class ExampleTheme extends Component {
render() {
return (
endAt={'2022-12-12 01:26:58'} // Date/Time
/>
);
}
}
`
`jsx
import React, { Component } from 'react';
import FlipCountdown from '@rumess/react-flip-countdown';
class ExampleTitlePosition extends Component {
render() {
return (
endAt={'2022-12-12 01:26:58'} // Date/Time
/>
);
}
}
`
`jsx
import React, { Component } from 'react';
import FlipCountdown from '@rumess/react-flip-countdown';
class ExampleChangeTitle extends Component {
render() {
return (
monthTitle='Months'
dayTitle='Days'
hourTitle='Hours'
minuteTitle='Minutes'
secondTitle='Seconds'
endAt={'2022-12-12 01:26:58'} // Date/Time
/>
);
}
}
`
`jsx
import React, { Component } from 'react';
import FlipCountdown from '@rumess/react-flip-countdown';
class ExampleHideSection extends Component {
render() {
return (
hideMonth
hideDay
// hideHour
// hideMinute
// hideSecond
endAt={'2022-12-12 01:26:58'} // Date/Time
/>
);
}
}
`
`jsx
import React, { Component } from 'react';
import FlipCountdown from '@rumess/react-flip-countdown';
class ExampleHideSection extends Component {
render() {
return (
endAt={'2022-12-12 01:26:58'} // Date/Time
/>
);
}
}
`
`jsx
import React, { Component } from 'react';
import FlipCountdown from '@rumess/react-flip-countdown';
class ExampleHideSection extends Component {
render() {
return (
onTimeUp={() => console.log("Time's up ⏳")}
/>
);
}
}
``
MIT © rumess
[npm-image]: https://img.shields.io/npm/v/@rumess/react-flip-countdown.svg
[npm-url]: https://npmjs.org/package/@rumess/react-flip-countdown
[downloads-image]: https://img.shields.io/npm/dm/@rumess/react-flip-countdown.svg
[downloads-url]: https://npmcharts.com/compare/@rumess/react-flip-countdown?minimal=true
[coding-image]: https://img.shields.io/badge/code_style-standard-brightgreen.svg
[coding-url]: https://standardjs.com