sendou.ink/frontend-react/src/hooks/useBreakPoints.ts

import { useState, useEffect } from "react"

function getWindowWidth() {
  const { innerWidth: width } = window
  return width
}

export default function useBreakPoints(breakpoints: number | number[]) {
  const [windowWidth, setWindowWidth] = useState<number>(getWindowWidth())

  useEffect(() => {
    function handleResize() {
      setWindowWidth(getWindowWidth())
    }

    window.addEventListener("resize", handleResize)
    return () => window.removeEventListener("resize", handleResize)
  }, [])

  if (Array.isArray(breakpoints)) {
    return breakpoints.map(breakpoint => windowWidth < breakpoint)
  }

  return windowWidth < breakpoints
}