Skip to main content
Version: v3.6.0

@rooks/use-window-size

Window size hook for React.


Build Status

Installation

npm install --save @rooks/use-window-size

Importing the hook

import useWindowSize from "@rooks/use-window-size"

Usage

function WindowComponent() {
const { innerWidth, innerHeight, outerHeight, outerWidth } = useWindowSize();

return (
<div>
<p>
<span>innerHeight - </span>
<span>{innerHeight}</span>
</p>
<p>
<span>innerWidth - </span>
<span>{innerWidth}</span>
</p>
<p>
<span>outerHeight - </span>
<span>{outerHeight}</span>
</p>
<p>
<span>outerWidth - </span>
<span>{outerWidth}</span>
</p>
</div>
);
}
render(<WindowComponent/>)

Returned Object keys

Returned object attributesTypeDescription
widthintinner width of window
heightintinner height of window
outerWidthintouter height of window
outerHeightintouter width of window