knirb

    <div className="App">
      <header className="App-header">
        <h2>Timers completed: {completed}</h2>
        <h2>{timer.value}</h2>
        <div>
          <Button onClick={timer.start}>Start</Button>
          <Button onClick={timer.stop}>Stop</Button>
        </div>
        <div>
          <Button onClick={timer.skip}>Skip</Button>

knirb

const length =  10 * 1000 * 60;
const App: React.FC = () => {
  const timer = useTimer({ length });
  return (
    <div className="App">
      <h2>{timer.value}</h2>
      <div>
        <Button onClick={timer.start}>Start</Button>
        <Button onClick={timer.stop}>Stop</Button>
        <Button onClick={timer.skip}>Skip</Button>

knirb

import { useState, useRef } from "react";

interface Props {
  length: number;
  onComplete?: () => void;
}

const tick = 200;

const format = (date: number): string => {