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 and count down logic in your react component.

1.0.1
Source
npmnpm
Version published
Weekly downloads
109K
-1.73%
Maintainers
1
Weekly downloads
 
Created
Source

react-timer-hook

React timer hook is a custom react hook, built to handle timers and count down logic in your react component.

Note:

React hooks is available from react version 16.7.0-alpha

Setup

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

Example

import React from 'react';
import useTimer  from './useTimer';

export default function App() {
  const now = new Date()
  const after10Days = now.setDate(now.getDate() + 10);
  const {
    seconds,
    minutes,
    hours,
    days,
    startTimer,
    stopTimer,
    resetTimer,
  } = useTimer({ autoStart: true });


  return (
    <div style={{textAlign: 'center'}}>
      <h1>react-timer-hook Demo</h1>
      <div style={{fontSize: '100px'}}>
        <span>{days}</span>:<span>{hours}</span>:<span>{minutes}</span>:<span>{seconds}</span>
      </div>
      <button onClick={startTimer}>Start</button>
      <button onClick={stopTimer}>Stop</button>
      <button onClick={resetTimer}>Reset</button>
    </div>
  );
}

Settings

keyTypeRequiredDescription
autoStartbooleanNoif set to true timer will auto start
expiryTimestampnumber(timestamp)Noif set a countdown timer will start, instead of normal timer

Values

keyTypeDescription
secondsnumberseconds value
minutesnumberminutes value
hoursnumberhours value
daysnumberdays value
startTimerfunctionfunction to be called to start timer
stopTimerfunctionfunction to be called to stop timer
resetTimerfunctionfunction to be called to reset timer, this reset will not make sense with countdown timer

Keywords

react

FAQs

Package last updated on 18 Nov 2018

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