breakpoints hook

1. use-breakpoints.ts

import { useCallback, useMemo, useEffect } from 'react'

export const useBreakpoints = <T extends Record<string, number>>(breakpoints: T): keyof T | undefined => {
  const searchBreakpoint = useCallback((breakpoints: { key: string, value: number }[]) => {
    return breakpoints.find((x) => window.innerWidth < x.value)?.key
  }, [])

  const entries = useMemo(() => {
    return Object
      .entries(breakpoints)
      .sort((a, b) => a[1] - b[1])
      .map(([key, value]) => ({ key, value }))
  }, [breakpoints])

  const [breakpoint, setBreakpoint] = useState(searchBreakpoint(entries))

  useEffect(() => {
    const onResize = () => {
      setBreakpoint(searchBreakpoint(entries))
    }
    window.addEventListener('resize', onResize)
    return () => {
      window.removeEventListener('resize', onResize)
    }
  }, [entries, searchBreakpoint])

  return breakpoint
}

2. example.tsx

import React from 'react'
import { useBreakpoints } from './use-breakpoints.ts' 

// I recommend to declare breakpoints somewhere outside the component
// to prevent unnecessary re-renders.
//
// Otherwise don't forget to wrap it around React.useMemo:
// useBreakpoints(React.useMemo({ sm: 640, md: 768, ... }))
const breakpoints = {
  sm: 640,
  md: 768,
  lg: 1024,
  xl: 1280
}

function App() {
  const size = useBreakpoints(breakpoints)

  if (size == 'sm') {
    return <p>Small device.</p>
  } else if (size == 'md') {
    return <p>Medium device.</p>
  } else if (size == 'lg') {
    return <p>Large device.</p>
  } else if (size == 'xl') {
    return <p>Very large device.</p>
  }

  return (
    <p>Extra large device!</p>
  )
}

export default App