Socket
Socket
Sign inDemoInstall

react-timer-hook

Package Overview
Dependencies
3
Maintainers
1
Versions
36
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

react-timer-hook

React timer hook is a custom react hook built to handle timers(countdown), stopwatch and time logic/state in your react component.


Version published
Maintainers
1
Weekly downloads
70,427
decreased by-5.74%

Weekly downloads

Readme

Source

react-timer-hook

React timer hook is a custom react hook, built to handle timer, stopwatch, and time logic/state in your react component.

  1. useTimer: Timers (countdown timer)
  2. useStopwatch: Stopwatch (count up timer)
  3. useTime: Time (return current time)

Setup

yarn add react-timer-hook OR npm install --save react-timer-hook


useTimer - Demo

Example

import React from 'react';
import { useTimer } from 'react-timer-hook';

function MyTimer({ expiryTimestamp }) {
  const {
    totalSeconds,
    seconds,
    minutes,
    hours,
    days,
    isRunning,
    start,
    pause,
    resume,
    restart,
  } = useTimer({ expiryTimestamp, onExpire: () => console.warn('onExpire called') });


  return (
    <div style={{textAlign: 'center'}}>
      <h1>react-timer-hook </h1>
      <p>Timer Demo</p>
      <div style={{fontSize: '100px'}}>
        <span>{days}</span>:<span>{hours}</span>:<span>{minutes}</span>:<span>{seconds}</span>
      </div>
      <p>{isRunning ? 'Running' : 'Not running'}</p>
      <button onClick={start}>Start</button>
      <button onClick={pause}>Pause</button>
      <button onClick={resume}>Resume</button>
      <button onClick={() => {
        // Restarts to 5 minutes timer
        const time = new Date();
        time.setSeconds(time.getSeconds() + 300);
        restart(time)
      }}>Restart</button>
    </div>
  );
}

export default function App() {
  const time = new Date();
  time.setSeconds(time.getSeconds() + 600); // 10 minutes timer
  return (
    <div>
      <MyTimer expiryTimestamp={time} />
    </div>
  );
}

Settings

keyTypeRequiredDescription
expiryTimestampDate objectYESthis will define for how long the timer will be running
autoStartbooleanNoflag to decide if timer should start automatically, by default it is set to true
onExpireFunctionNocallback function to be executed once countdown timer is expired

Values

keyTypeDescription
secondsnumberseconds value
minutesnumberminutes value
hoursnumberhours value
daysnumberdays value
totalSecondsnumbertotal number of seconds left in timer NOT converted to minutes, hours or days
isRunningbooleanflag to indicate if timer is running or not
pausefunctionfunction to be called to pause timer
startfunctionfunction if called after pause the timer will continue based on original expiryTimestamp
resumefunctionfunction if called after pause the timer will continue countdown from last paused state
restartfunctionfunction to restart timer with new expiryTimestamp, accept 2 arguments first is the new expiryTimestamp of type Date object and second is autoStart of type boolean to decide if it should automatically start after restart or not, default is true

useStopwatch - Demo

Example

import React from 'react';
import { useStopwatch } from 'react-timer-hook';

function MyStopwatch() {
  const {
    totalSeconds,
    seconds,
    minutes,
    hours,
    days,
    isRunning,
    start,
    pause,
    reset,
  } = useStopwatch({ autoStart: true });


  return (
    <div style={{textAlign: 'center'}}>
      <h1>react-timer-hook</h1>
      <p>Stopwatch Demo</p>
      <div style={{fontSize: '100px'}}>
        <span>{days}</span>:<span>{hours}</span>:<span>{minutes}</span>:<span>{seconds}</span>
      </div>
      <p>{isRunning ? 'Running' : 'Not running'}</p>
      <button onClick={start}>Start</button>
      <button onClick={pause}>Pause</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <MyStopwatch />
    </div>
  );
}

Settings

keyTypeRequiredDescription
autoStartbooleanNoif set to true stopwatch will auto start, by default it is set to false
offsetTimestampDate objectNothis will define the initial stopwatch offset example: const stopwatchOffset = new Date(); stopwatchOffset.setSeconds(stopwatchOffset.getSeconds() + 300); this will result in a 5 minutes offset and stopwatch will start from 0:0:5:0 instead of 0:0:0:0

Values

keyTypeDescription
secondsnumberseconds value
minutesnumberminutes value
hoursnumberhours value
daysnumberdays value
totalSecondsnumbertotal number of seconds in stopwatch NOT converted to minutes, hours or days
isRunningbooleanflag to indicate if stopwatch is running or not
startfunctionfunction to be called to start/resume stopwatch
pausefunctionfunction to be called to pause stopwatch
resetfunctionfunction to be called to reset stopwatch to 0:0:0:0, you can also pass offset parameter to this function to reset stopwatch with offset, similar to how offsetTimestamp will offset the initial stopwatch time, this function will accept also a second argument which will decide if stopwatch should automatically start after reset or not default is true

useTime - Demo

Example

import React from 'react';
import { useTime } from 'react-timer-hook';

function MyTime() {
  const {
    seconds,
    minutes,
    hours,
    ampm,
  } = useTime({ format: '12-hour'});

  return (
    <div style={{textAlign: 'center'}}>
      <h1>react-timer-hook </h1>
      <p>Current Time Demo</p>
      <div style={{fontSize: '100px'}}>
        <span>{hours}</span>:<span>{minutes}</span>:<span>{seconds}</span><span>{ampm}</span>
      </div>
    </div>
  );
}

export default function App() {
  return (
    <div>
      <MyTime />
    </div>
  );
}

Settings

keyTypeRequiredDescription
formatstringNoif set to 12-hour time will be formatted with am/pm

Values

keyTypeDescription
secondsnumberseconds value
minutesnumberminutes value
hoursnumberhours value
ampmstringam/pm value if 12-hour format is used

Deprecation Warning:

Starting from v1.1.0 and above default export useTimer is deprecated, your old code will still work but it is better to start using named exports { useTimer, useStopwatch, useTime }

Keywords

FAQs

Last updated on 20 Jul 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc