react-dead-simple-stopwatch-hook's Introduction

⏱️ React Dead Simple Stopwatch Hook

Features ✨

Simple stopwatch hook
Basic features like pause, unpause, start, stop
Small size and no dependencies
Uses Date.now for accurate readings

Install ⬇

npm i react-dead-simple-stopwatch-hook

Quickstart ⚡

import { useStopwatch, decorateTimeStamp } from 'react-dead-simple-stopwatch-hook';

function App() {
const {
  currentTime,
  isTimerActive,
  start,
  stop,
  pause,
  resume
} = useStopwatch();

  return (
    <>
        <button onClick={() => start()}>start</button>
        <button onClick={() => stop()}>stop</button>
        <button onClick={() => pause()}>pause</button>
        <button onClick={() => resume()}>resume</button>

        <span>{decorateTimeStamp(currentTime)}</span>
    </>
  )
}

useStopwatch API

params

value	type	default value	description
options.customStartTime	number	Date.now()	Adds a custom start time if you want to start the timer late
onStart, onStop, onPause	() => void \| undefined	undefined	Calls custom function before start, stop, pause

return

value	type	description
currentTime	number	The current type returned as a difference of epoch timestamp, i.e. the result of Date.now()
startTime	number	The epoch timestamp from which we started the watch
isTimerActive	boolean \| null	Timer running state
timerRef	MutableRefObject<number \| null>	Ref for the setInterval
timerState	"paused" \| "stopped" \| "resumed"	Simplified state for the timer
start()	() => void	Starts the timer from startTime
stop()	() => void	Stops the timer completely. Starting the timer from here starts from 00:00:00
pause()	() => void	Pauses the timer
resume()	() => void	Resumes the timer. Works only when timer is paused and not stopped.

decorateTimeStamp

params

value	type	default value	description
ms	number	0	Epoch of the time to change

return

value	type	description
formattedTime	string	timestamp in the format mm:ss:ms

react-dead-simple-stopwatch-hook's People

Contributors

Stargazers

Watchers

react-dead-simple-stopwatch-hook's Issues

Attempted import error

Good morning 👋
I'm trying to use your module I installed with npm, react-dead-simpler-stopwatch-hook from https://www.npmjs.com/package/react-dead-simple-stopwatch-hook
I've followed the readme but I'm getting some errors

Attempted import error: 'useStopwatch' is not exported from 'react-dead-simple-stopwatch-hook' (imported as 'useStopwatch').
ERROR in ./src/Timer.js 24:6-18
export 'useStopwatch' (imported as 'useStopwatch') was not found in 'react-dead-simple-stopwatch-hook' (module has no exports)

ERROR in ./src/Timer.js 48:16-33
export 'decorateTimeStamp' (imported as 'decorateTimeStamp') was not found in 'react-dead-simple-stopwatch-hook' (module has no exports)

ERROR in ./src/Timer.js 75:10-22
export 'useStopwatch' (imported as 'useStopwatch') was not found in 'react-dead-simple-stopwatch-hook' (module has no exports)

ERROR in ./node_modules/react-dead-simple-stopwatch-hook/src/index.ts 1:0-43
Module not found: Error: Can't resolve './useStopwatch' in '/home//Coding/Football Score Keeper/app/node_modules/react-dead-simple-stopwatch-hook/src'

ERROR in ./node_modules/react-dead-simple-stopwatch-hook/src/index.ts 2:0-54
Module not found: Error: Can't resolve './decorateTimeStamp' in '/home//Coding/Football Score Keeper/app/node_modules/react-dead-simple-stopwatch-hook/src'

import { useStopwatch, decorateTimeStamp } from 'react-dead-simple-stopwatch-hook';

function Timer() {

    const {
        currentTime ,
        isTimerActive,
        start,
        stop,
        pause,
        resume
    } = useStopwatch();

    function startTimer() {
        start();
   }

    function stopTimer() {
        stop();
    }

    return (
        <div className="timer">

            <p>{decorateTimeStamp(currentTime)}</p>
            <button onClick={stopTimer}>Stop/Pause</button>
            <button onClick={startTimer}>Start</button>

        </div>
    )
}

export default Timer;

I've tried uninstalling and reinstalling, clearing npm cache (deprecated apparently) and checked that the module is in package.json and package-lock.json which it is. It is installed in the correct directory, node_modules under the root directory I am unsure how to proceed?