diff --git a/README.md b/README.md index 0faad283..ad57361e 100644 --- a/README.md +++ b/README.md @@ -23,7 +23,7 @@ For Next.js, see https://github.com/kitsuyui/nextjs-playground/ . https://www.npmjs.com/package/@kitsuyui/react-clock - [x] `@kitsuyui/react-timer` ... [![npm version](https://badge.fury.io/js/@kitsuyui%2Freact-timer.svg)](https://badge.fury.io/js/@kitsuyui%2Freact-timer) https://www.npmjs.com/package/@kitsuyui/react-timer -- [ ] Stopwatch +- [x] `@kitsuyui/react-stopwatch` ... [![npm version](https://badge.fury.io/js/@kitsuyui%2Freact-stopwatch.svg)](https://badge.fury.io/js/@kitsuyui%2Freact-stopwatch) - [ ] Alarm - [ ] Dice diff --git a/packages/stopwatch/README.md b/packages/stopwatch/README.md index 4d6e2ecf..5b4a6992 100644 --- a/packages/stopwatch/README.md +++ b/packages/stopwatch/README.md @@ -1 +1,55 @@ # @kitsuyui/react-stopwatch + +[![npm version](https://badge.fury.io/js/@kitsuyui%2Freact-stopwatch.svg)](https://badge.fury.io/js/@kitsuyui%2Freact-stopwatch) + +Stopwatch + +## Installation + +### npm + +```sh +npm install @kitsuyui/react-stopwatch +``` + +### yarn + +```sh +yarn 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 +```