Version: Next

use-window-size

About#

Window size hook for React.


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

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.

Last updated on by imbhargav5