talalmajali / React Native Countdown Component
Licence: mit
React Native CountDown
Stars: ✭ 193
Programming Languages
javascript
184084 projects - #8 most used programming language
Projects that are alternatives of or similar to React Native Countdown Component
Flip
⏳ The online version of the classic flip clock
Stars: ✭ 460 (+138.34%)
Mutual labels: counter, countdown
Termdown
Countdown timer and stopwatch in your terminal
Stars: ✭ 749 (+288.08%)
Mutual labels: timer, countdown
Node Measured
A Node metrics library for measuring and reporting application-level metrics, inspired by Coda Hale, Yammer Inc's Dropwizard Metrics Libraries
Stars: ✭ 500 (+159.07%)
Mutual labels: timer, counter
Dipstick
Configurable metrics toolkit for Rust applications
Stars: ✭ 92 (-52.33%)
Mutual labels: timer, counter
react-component-countdown-timer
This is a simple count down timer react component.
Stars: ✭ 18 (-90.67%)
Mutual labels: countdown, timer
Countdownlabel
Simple countdown UILabel with morphing animation, and some useful function.
Stars: ✭ 714 (+269.95%)
Mutual labels: timer, countdown
use-countdown-timer
React hook exposing a countdown timer with optional expiration reset callbacks
Stars: ✭ 31 (-83.94%)
Mutual labels: countdown, timer
Flip Clock
A flip clock, timer and countdown made with Polymer
Stars: ✭ 69 (-64.25%)
Mutual labels: timer, countdown
Countdowntask
⌛️A countdown library for Android.
Stars: ✭ 64 (-66.84%)
Mutual labels: timer, countdown
alfred-timer-workflow
Alfred workflow to start a timer, which blinks when the time is up.
Stars: ✭ 39 (-79.79%)
Mutual labels: countdown, timer
inspector-metrics
Typescript metrics / monitoring library
Stars: ✭ 19 (-90.16%)
Mutual labels: counter, timer
Web-Time-Tracker
Plugin named Timetracker is a time counter that works in both increase and decrease directions.
Stars: ✭ 21 (-89.12%)
Mutual labels: countdown, timer
Easytimer.js
Easy to use Timer/Stopwatch/Countdown library compatible with AMD, ES6 and Typescript
Stars: ✭ 562 (+191.19%)
Mutual labels: timer, countdown
react-timer-wrapper
Composable React Timer component that passes status props to children, in addition to some basic callbacks. Can be used at a countdown timer ⏲ or as stopwatch ⏱ to track time while active.
Stars: ✭ 14 (-92.75%)
Mutual labels: countdown, timer
tiny-timer
🕑 Small countdown timer and stopwatch module.
Stars: ✭ 39 (-79.79%)
Mutual labels: countdown, timer
React Countdown
React Component showing a countdown to certain date and time.
Stars: ✭ 58 (-69.95%)
Mutual labels: timer, countdown
react-native-countdown
React Native CountDown
Installation
Run npm install react-native-countdown-component --save
OR yarn add react-native-countdown-component --save
Props
Preview
Code
import CountDown from 'react-native-countdown-component';
render() {
return (
<CountDown
until={10}
onFinish={() => alert('finished')}
onPress={() => alert('hello')}
size={20}
/>
)
}
Custom Styling Example
Code
import CountDown from 'react-native-countdown-component';
render() {
return (
<CountDown
until={60 * 10 + 30}
size={30}
onFinish={() => alert('Finished')}
digitStyle={{backgroundColor: '#FFF'}}
digitTxtStyle={{color: '#1CC625'}}
timeToShow={['M', 'S']}
timeLabels={{m: 'MM', s: 'SS'}}
/>
)
}
Separator Example
Code
import CountDown from 'react-native-countdown-component';
render() {
return (
<CountDown
size={30}
until={1000}
onFinish={() => alert('Finished')}
digitStyle={{backgroundColor: '#FFF', borderWidth: 2, borderColor: '#1CC625'}}
digitTxtStyle={{color: '#1CC625'}}
timeLabelStyle={{color: 'red', fontWeight: 'bold'}}
separatorStyle={{color: '#1CC625'}}
timeToShow={['H', 'M', 'S']}
timeLabels={{m: null, s: null}}
showSeparator
/>
)
}
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].