@kitsuyui/react-stopwatch


Simple stopwatch React component.

Demo

Storybook: https://react-playground.docs.kitsuyui.com/storybook/

Installation

$3

``sh
npm install @kitsuyui/react-stopwatch
`

$3

`sh
yarn add @kitsuyui/react-stopwatch
`

$3

`sh
pnpm add @kitsuyui/react-stopwatch
`

Usage

`tsx
import { StopWatchContainer, MinimalStopwatch } from '@kitsuyui/react-stopwatch'

const Stopwatch = () => {
return (


{(props: StopwatchProps) => }


)
}
`

StopwatchContainer is a component that provides StopwatchContext.
Stopwatchs are pure components that do not depend on StopwatchContext. Accept StopwatchProps as props.
So you can define your own Stopwatch component by same interface.

`typescript
export interface StopwatchValue {
elapsedTime: number
running: boolean
}

export interface StopwatchActions {
start(): void
stop(): void
toggle(): void
reset(): void
}

export type StopwatchProps = StopwatchValue & StopwatchActions
``

License

MIT