useReziseWindow react custom hook

index.js

import { useEffect, useState } from 'react'

export default function useReziseWindow() {
  const [windowWidth, setWindowWidth] = useState<number | null>()

  useEffect(() => {
    const onResize = () => {
      setWindowWidth(window?.innerWidth)
    }

    window.addEventListener('resize', onResize)

    return () => {
      window.removeEventListener('resize', onResize)
    }
  }, [])

  return windowWidth
}

example usage:

import { useEffect, useState } from 'react'
import useReziseWindow from 'hooks/use-rezise-window'
import * as S from './styles'

const Banner = () => {
  const windowWidth = useReziseWindow()

  const [isMobile, setIsMobile] = useState(false)

  useEffect(() => {
    if (windowWidth) {
      setIsMobile(windowWidth < 768)
    }
  }, [windowWidth])

  return (
    <>...</>
  )
}

export default Banner