import { TimerContainer, MinimalTimer } from '@kitsuyui/react-timer'

const Timer = () => {
  return (
    <TimerContainer>
      <TimerContext.Consumer>
        {(timer: TimerProps) => <MinimalTimer {...timer} />}
      </TimerContext.Consumer>
    </TimerContainer>
  )
}

TimerContainer is a component that provides TimerContext. Timers are pure components that do not depend on TimerContext. Accept TimerProps as props. So you can define your own Timer component by same interface.

export interface TimerValue {
  remaining: number
  running: boolean
}

export interface TimerActions {
  start(): void
  stop(): void
  toggle(): void
  reset(): void
  incrementTimerValue(value: number): void
  setTimerValue(value: number): void
}

export type TimerProps = TimerValue & TimerActions

License

MIT