thibaultboursier / Use Timer
Licence: mit
A timer hook for React
Stars: ✭ 113
Programming Languages
typescript
32286 projects
Projects that are alternatives of or similar to Use Timer
Flipdown
⏰ A lightweight and performant flip styled countdown clock
Stars: ✭ 136 (+20.35%)
Mutual labels: timer, clock, countdown
Flip Clock
A flip clock, timer and countdown made with Polymer
Stars: ✭ 69 (-38.94%)
Mutual labels: timer, clock, countdown
React Countdown
React Component showing a countdown to certain date and time.
Stars: ✭ 58 (-48.67%)
Mutual labels: timer, clock, countdown
Md Date Time Picker
An implementation of Material Design Picker components in vanilla CSS, JS, and HTML
Stars: ✭ 272 (+140.71%)
Mutual labels: time, clock
Oycountdownmanager
在cell中使用倒计时的处理方法, 全局使用一个NSTimer对象, 支持单列表.多列表.多页面.分页列表使用
Stars: ✭ 317 (+180.53%)
Mutual labels: time, countdown
Klock
Multiplatform Date and time library for Kotlin
Stars: ✭ 569 (+403.54%)
Mutual labels: time, clock
clock
High-resolution clock functions: monotonic, realtime, cputime.
Stars: ✭ 52 (-53.98%)
Mutual labels: time, clock
Portable Snippets
Collection of miscellaneous portable C snippets.
Stars: ✭ 397 (+251.33%)
Mutual labels: time, clock
Countdownlabel
Simple countdown UILabel with morphing animation, and some useful function.
Stars: ✭ 714 (+531.86%)
Mutual labels: timer, countdown
Simple Clock
Combination of a beautiful clock with widget, alarm, stopwatch & timer, no ads
Stars: ✭ 257 (+127.43%)
Mutual labels: timer, clock
Peaclock
A responsive and customizable clock, timer, and stopwatch for the terminal.
Stars: ✭ 314 (+177.88%)
Mutual labels: timer, clock
Web-Time-Tracker
Plugin named Timetracker is a time counter that works in both increase and decrease directions.
Stars: ✭ 21 (-81.42%)
Mutual labels: countdown, timer
Easytimer.js
Easy to use Timer/Stopwatch/Countdown library compatible with AMD, ES6 and Typescript
Stars: ✭ 562 (+397.35%)
Mutual labels: timer, countdown
Countdowntask
⌛️A countdown library for Android.
Stars: ✭ 64 (-43.36%)
Mutual labels: timer, countdown
Truetime Android
Android NTP time library. Get the true current time impervious to device clock time changes
Stars: ✭ 1,134 (+903.54%)
Mutual labels: time, clock
react-component-countdown-timer
This is a simple count down timer react component.
Stars: ✭ 18 (-84.07%)
Mutual labels: countdown, timer
⏱️ use-timer
Simple timer turned into React Hooks. Read about Hooks feature.
Installation
npm i use-timer
With Yarn:
yarn add use-timer
Demo
🚀 Try last production version on Netlify!
https://use-timer.netlify.app/
Usage
Basic timer
import React from 'react';
import { useTimer } from 'use-timer';
const App = () => {
const { time, start, pause, reset, status } = useTimer();
return (
<>
<div>
<button onClick={start}>Start</button>
<button onClick={pause}>Pause</button>
<button onClick={reset}>Reset</button>
</div>
<p>Elapsed time: {time}</p>
{status === 'RUNNING' && <p>Running...</p>}
</>
);
};
Decremental timer
const { time, start, pause, reset, status } = useTimer({
initialTime: 100,
timerType: 'DECREMENTAL',
});
Timer with end time
const { time, start, pause, reset, status } = useTimer({
endTime: 30,
initialTime: 10,
});
Advance time
This works for all types of timer (incremental and decremental).
const { time, start, advanceTime } = useTimer({
initialTime: 20,
});
start();
advanceTime(10);
console.log(time); // 30
Callbacks
Some callback functions can be provided.
When time is over
const { time, start, pause, reset, status } = useTimer({
endTime,
onTimeOver: () => {
console.log('Time is over');
},
});
When time is updated
const { time, start, pause, reset, status } = useTimer({
endTime,
onTimeUpdate: (time) => {
console.log('Time is updated', time);
},
});
Configuration
The configuration and all its parameters are optional.
Property | Type | Default value | Description |
---|---|---|---|
autostart | boolean | false | Pass true to start timer automatically |
endTime | number | null | The value for which timer stops |
initialTime | number | 0 | The starting value for the timer |
interval | number | 1000 | The interval in milliseconds |
onTimeOver | function | Callback function that is called when time is over | |
onTimeUpdate | function | Callback function that is called when time is updated | |
step | number | 1 | The value to add to each increment / decrement |
timerType | string | "INCREMENTAL" | The choice between a value that increases ("INCREMENTAL") or decreases ("DECREMENTAL") |
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].