@rooks/use-window-size

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 attributes	Type	Description
width	int	inner width of window
height	int	inner height of window
outerWidth	int	outer height of window
outerHeight	int	outer width of window