JSPM – react-timer-hook@1.0.2

Package Exports

react-timer-hook

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-timer-hook) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-timer-hook

React timer hook is a custom react hook, built to handle timers and countdown 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 'react-timer-hook';

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

key	Type	Required	Description
autoStart	boolean	No	if set to `true` timer will auto start
expiryTimestamp	number(timestamp)	No	if set a countdown timer will start, instead of normal timer

Values

key	Type	Description
seconds	number	seconds value
minutes	number	minutes value
hours	number	hours value
days	number	days value
startTimer	function	function to be called to start timer
stopTimer	function	function to be called to stop timer
resetTimer	function	function to be called to reset timer, this reset will not make sense with countdown timer