useWindowSize()
Easily retrieve window dimensions with this Hook React which also works onRezise.
This hook uses useScreen
internally.
The Hook
1// See: https://usehooks-typescript.com/react-hook/use-screen2import { useScreen } from '~/hooks'34interface WindowSize {5 width: number6 height: number7}89function useWindowSize(): WindowSize {10 const screen = useScreen()1112 return {13 width: screen?.width || 0,14 height: screen?.height || 0,15 }16}1718export default useWindowSize
Usage
1import React from 'react'23import useWindowSize from './useWindowSize'45export default function Component() {6 const { width, height } = useWindowSize()78 return (9 <div>10 The current window dimensions are:{' '}11 <code>{JSON.stringify({ width, height })}</code>12 </div>13 )14}
Created:
10 months ago