useScreen()
Easily retrieve window.screen
object with this Hook React which also works onRezise.
The Hook
1import { useState } from 'react'23// See: https://usehooks-ts.com/react-hook/use-event-listener4import { useEventListener } from '../useEventListener'5// See: https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect6import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect'78function useScreen() {9 const getScreen = () => {10 if (typeof window !== 'undefined' && window.screen) {11 return window.screen12 }13 return undefined14 }1516 const [screen, setScreen] = useState<Screen | undefined>(getScreen())1718 function handleSize() {19 setScreen(getScreen())20 }2122 useEventListener('resize', handleSize)2324 // Set size at the first client-side load25 useIsomorphicLayoutEffect(() => {26 handleSize()27 // eslint-disable-next-line react-hooks/exhaustive-deps28 }, [])2930 return screen31}3233export default useScreen
Usage
1import React from 'react'23import { useScreen } from 'usehooks-ts'45export default function Component() {6 const screen = useScreen()78 return (9 <div>10 The current window dimensions are:{' '}11 <code>12 {JSON.stringify({ width: screen?.width, height: screen?.height })}13 </code>14 </div>15 )16}
See a way to make this page better?
Edit there »