react-hook-stopwatch v0.1.8
React Stopwatch Hook
React Stopwatch Hook is a customizable stopwatch component that can be easily integrated into your React projects. This hook provides the functionality of a stopwatch, including starting, pausing, resetting, and retrieving elapsed time.
This hook uses localStorage internally, which means that the stopwatch data will persist even if the user closes the page or refreshes it.
Installation
To use this hook, you can install it from npm:
npm install react-hook-stopwatch
or
yarn add react-hook-stopwatch
Usage
To use the useStopwatch
hook, you can import it into your React component and call it as shown below:
import React from 'react';
import { useStopwatch } from 'react-stopwatch-hook';
function Stopwatch() {
const { interval, operations } = useStopwatch();
return (
<div>
<h1>
{interval.hours}:{interval.minutes}:{interval.seconds}:{interval.milliseconds}
</h1>
<button onClick={operations.start}>Start</button>
<button onClick={operations.stop}>Stop</button>
<button onClick={operations.reset}>Reset</button>
<button onClick={operations.resume}>Resume</button>
</div>
);
}
export default Stopwatch;
Props
The useStopwatch
hook can accept an optional option
parameter of type StopwatchOption
, which is an object that can be used to customize the behavior of the stopwatch. The default options are set in defaultStateDateOption
.
Returns
The useStopwatch
hook returns an object that contains the following properties:
startAt
: The date and time when the stopwatch was started.interval
: The current elapsed time of the stopwatch in hours, minutes, seconds, and milliseconds.operations
: An object containing functions to control the stopwatch, includingstart
,stop
,reset
, andresume
.
License
MIT
Contact
Twitter:@memenashi