1.0.3 • Published 2 years ago
@glamboyosa/react-stopwatch v1.0.3
@glamboyosa/react-stopwatch
A small package that exposes a performant stopwatch UI component and hook.
Install
npm install --save @glamboyosa/react-stopwatch
#or
yarn add @glamboyosa/react-stopwatch
This package ships with a custom hook - useStopwatch
and a Stopwatch
component.
useStopwatch API
const { stop, start, stopwatchProps } = useStopwatch(style)
style
: An optional React CSS style object and allows you to configure the<Stopwatch/>
with CSS style properties likefontSize
etc.start
: A function that's used to start the stopwatch.stop
: A function that's used to stop the stopwatch.stopwatchProps
: A collection of props spread onto the<Stopwatch/>
component.
Usage
import React from 'react'
import { Stopwatch, useStopwatch } from '@glamboyosa/react-stopwatch'
import '@glamboyosa/react-stopwatch/dist/index.css'
const App = () => {
const { start, stop, stopwatchProps } = useStopwatch({
fontSize: '30px',
justifyContent: 'center',
alignItems: 'center'
})
return (
<>
<Stopwatch {...stopwatchProps} />
<button onClick={start}>Start</button>
<button onClick={stop}>Stop</button>
</>
)
}
License
MIT © glamboyosa