Skip to main content
Version: Next

useWindowSize

About​

Window size hook for React.


Installation​

npm install --save rooks

Importing the hook​

import {useWindowSize} from "rooks

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

Codesandbox Example​

Basic usage​

Join Bhargav's discord server​

You can click on the floating discord icon at the bottom right of the screen and talk to us in our server.