React Hooks Example: Timer

Simple React Hooks example. A timer that pauses when you hold the mouse button. Creates and uses a custom Hook.

by wsypeter

HTML

<div id="app"></div>

CSS

.timer {
  padding: 20px;
  font-size: 40px;
}

React

// Custom Hook: useMousePressed
function useMousePressed () {
  const [mousePressed, setMousePressed] = React.useState(false)

  function handleMouseDown () {
    setMousePressed(true)
  }

  function handleMouseUp () {
    setMousePressed(false)
  }

  React.useEffect(function () {
    window.addEventListener('mousedown', handleMouseDown)
    window.addEventListener('mouseup', handleMouseUp)

    return function cleanup () {
      window.removeEventListener('mousedown', handleMouseDown)
      window.removeEventListener('mouseup', handleMouseUp)
    }
  }, [])

  return mousePressed
}

function Timer () {
  const [milliseconds, setMilliseconds] = React.useState(0)
  const mousePressed = useMousePressed()

  // Timer
  React.useEffect(function () {
    const timerId = setInterval(function () {
      if (!mousePressed) {
        setMilliseconds(m => m + 1)
      }
    }, 1)

    return function cleanup () {
      clearInterval(timerId)
    }
  }, [mousePressed])

  return (
    <div className='timer'>
      {milliseconds}
    </div>
  )
}

ReactDOM.render(<Timer />, document.querySelector("#app"))