Sha256: c83fc4295fda285c994b6401dd76daa5f4e788c8c1e2715695ded2d2d956f9dd
Contents?: true
Size: 1.4 KB
Versions: 31
Compression:
Stored size: 1.4 KB
Contents
import { useState, useEffect } from 'react'
export const breakpointValues = {
none: 0,
xs: 575,
sm: 768,
md: 992,
lg: 1200,
xl: 1400,
} as const
type BreakpointSize = keyof typeof breakpointValues
interface UseBreakpointProps {
breakpoint?: BreakpointSize
triggerId?: string
}
export const useBreakpoint = ({
breakpoint = 'none',
triggerId
}: UseBreakpointProps) => {
const [isOpenBreakpointOpen, setIsOpenBreakpointOpen] = useState(false)
const [isUserClosed, setIsUserClosed] = useState(false)
useEffect(() => {
if (breakpoint === 'none') return
const handleResize = () => {
const width = window.innerWidth
const openBreakpointWidth = breakpointValues[breakpoint]
if (width >= openBreakpointWidth) {
setIsOpenBreakpointOpen(true)
} else {
setIsOpenBreakpointOpen(false)
setIsUserClosed(false)
}
// Handle menu button visibility
if (triggerId) {
const menuButton = document.getElementById(triggerId)
if (menuButton) {
menuButton.style.display = isOpenBreakpointOpen ? 'none' : ''
}
}
}
window.addEventListener('resize', handleResize)
handleResize()
return () => window.removeEventListener('resize', handleResize)
}, [breakpoint, triggerId, isOpenBreakpointOpen])
return {
isOpenBreakpointOpen,
isUserClosed,
setIsUserClosed
}
}
Version data entries
31 entries across 31 versions & 1 rubygems