You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

react-timer-hook

Package Overview
Dependencies
Maintainers
1
Versions
43
Alerts
File Explorer

Advanced tools

Socket logo

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.

1.1.10
Source
npmnpm
Version published
Weekly downloads
110K
-1.73%
Maintainers
1
Weekly downloads
 
Created
Source

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.

  • useTimer: Timers (countdown timer)
  • useStopwatch: Stopwatch (count up timer)
  • useTime: Time (return current time)

Note:

React hooks is available from react version 16.8.0

Setup

yarn add react-timer-hook

OR

npm install --save react-timer-hook

useTimer

Example

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

function MyTimer({ expiryTimestamp }) {
  const {
    seconds,
    minutes,
    hours,
    days,
    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>
      <button onClick={start}>Start</button>
      <button onClick={pause}>Pause</button>
      <button onClick={resume}>Resume</button>
      <button onClick={() => {
        // Restarts to 5 minutes timer
        var t = new Date();
        t.setSeconds(t.getSeconds() + 300);
        restart(t)
      }}>restart</button>
    </div>
  );
}

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

Settings

keyTypeRequiredDescription
expiryTimestampnumber(timestamp)YESthis will define for how long the timer will be running
onExpireFunctionNocallback function to be executed once countdown timer is expired

Values

keyTypeDescription
secondsnumberseconds value
minutesnumberminutes value
hoursnumberhours value
daysnumberdays value
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

useStopwatch

Example

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

function MyStopwatch() {
  const {
    seconds,
    minutes,
    hours,
    days,
    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>
      <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

Values

keyTypeDescription
secondsnumberseconds value
minutesnumberminutes value
hoursnumberhours value
daysnumberdays value
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

useTime

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

react

FAQs

Package last updated on 06 Jan 2020

Did you know?

Socket

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