Simple stopwatch React component.
Storybook: https://react-playground.docs.kitsuyui.com/storybook/
npm install @kitsuyui/react-stopwatchyarn add @kitsuyui/react-stopwatchpnpm add @kitsuyui/react-stopwatchimport { StopWatchContainer, MinimalStopwatch } from '@kitsuyui/react-stopwatch'
const Stopwatch = () => {
return (
<StopwatchContainer>
<StopwatchContext.Consumer>
{(props: StopwatchProps) => <MinimalStopwatch {...props} />}
</StopwatchContext.Consumer>
</StopwatchContainer>
)
}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.
export interface StopwatchValue {
elapsedTime: number
running: boolean
}
export interface StopwatchActions {
start(): void
stop(): void
toggle(): void
reset(): void
}
export type StopwatchProps = StopwatchValue & StopwatchActionsMIT