feat: remove resize event listener

This commit is contained in:
codytseng
2025-05-07 23:24:29 +08:00
parent 55862da1d3
commit 7a63f475da

View File

@@ -1,9 +1,6 @@
import { createContext, useContext, useEffect, useMemo, useState } from 'react' import { createContext, useContext, useMemo } from 'react'
type TScreenSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl'
type TScreenSizeContext = { type TScreenSizeContext = {
screenSize: TScreenSize
isSmallScreen: boolean isSmallScreen: boolean
isLargeScreen: boolean isLargeScreen: boolean
} }
@@ -19,36 +16,12 @@ export const useScreenSize = () => {
} }
export function ScreenSizeProvider({ children }: { children: React.ReactNode }) { export function ScreenSizeProvider({ children }: { children: React.ReactNode }) {
const [screenSize, setScreenSize] = useState<TScreenSize>('sm') const isSmallScreen = useMemo(() => window.innerWidth < 640, [])
const isSmallScreen = useMemo(() => screenSize === 'sm', [screenSize]) const isLargeScreen = useMemo(() => window.innerWidth >= 1280, [])
const isLargeScreen = useMemo(() => ['2xl'].includes(screenSize), [screenSize])
useEffect(() => {
const handleResize = () => {
if (window.innerWidth < 640) {
setScreenSize('sm')
} else if (window.innerWidth < 768) {
setScreenSize('md')
} else if (window.innerWidth < 1024) {
setScreenSize('lg')
} else if (window.innerWidth < 1280) {
setScreenSize('xl')
} else {
setScreenSize('2xl')
}
}
handleResize()
window.addEventListener('resize', handleResize)
return () => {
window.removeEventListener('resize', handleResize)
}
}, [])
return ( return (
<ScreenSizeContext.Provider <ScreenSizeContext.Provider
value={{ value={{
screenSize,
isSmallScreen, isSmallScreen,
isLargeScreen isLargeScreen
}} }}