49 lines
1.1 KiB
TypeScript
49 lines
1.1 KiB
TypeScript
import {
|
|
createContext,
|
|
ReactNode,
|
|
useCallback,
|
|
useContext,
|
|
useEffect,
|
|
useState,
|
|
} from 'react'
|
|
|
|
type ViewportContextProps = {
|
|
width: number
|
|
height: number
|
|
}
|
|
|
|
const ViewportContext = createContext({} as ViewportContextProps)
|
|
|
|
export const ViewportProvider = ({ children }: { children: ReactNode }) => {
|
|
const [mounted, setMounted] = useState(false)
|
|
const [width, setWidth] = useState<number>(0)
|
|
const [height, setHeight] = useState<number>(0)
|
|
|
|
const handleWindowResize = useCallback(() => {
|
|
if (typeof window !== 'undefined') {
|
|
setWidth(window.innerWidth)
|
|
setHeight(window.innerHeight)
|
|
}
|
|
}, [])
|
|
|
|
useEffect(() => {
|
|
handleWindowResize()
|
|
window.addEventListener('resize', handleWindowResize)
|
|
return () => window.removeEventListener('resize', handleWindowResize)
|
|
}, [handleWindowResize])
|
|
|
|
useEffect(() => setMounted(true), [])
|
|
if (!mounted) return null
|
|
|
|
return (
|
|
<ViewportContext.Provider value={{ width, height }}>
|
|
{children}
|
|
</ViewportContext.Provider>
|
|
)
|
|
}
|
|
|
|
export const useViewport = () => {
|
|
const { width, height } = useContext(ViewportContext)
|
|
return { width, height }
|
|
}
|