useScreen()
Easily retrieve window.screen
object with this Hook React which also works onResize.
The Hook
1import { useState } from 'react'23import { useEventListener, useIsomorphicLayoutEffect } from 'usehooks-ts'45function useScreen() {6 const getScreen = () => {7 if (typeof window !== 'undefined' && window.screen) {8 return window.screen9 }10 return undefined11 }1213 const [screen, setScreen] = useState<Screen | undefined>(getScreen())1415 function handleSize() {16 setScreen(getScreen())17 }1819 useEventListener('resize', handleSize)2021 // Set size at the first client-side load22 useIsomorphicLayoutEffect(() => {23 handleSize()24 // eslint-disable-next-line react-hooks/exhaustive-deps25 }, [])2627 return screen28}2930export default useScreen
Usage
1import { useScreen } from 'usehooks-ts'23export default function Component() {4 const screen = useScreen()56 return (7 <div>8 The current window dimensions are:{' '}9 <code>10 {JSON.stringify({ width: screen?.width, height: screen?.height })}11 </code>12 </div>13 )14}
See a way to make this page better?
Edit there »