useWindowSize

About

Window size hook for React.


Examples

Basic usage

import "./styles.css";
import { useWindowSize } from "rooks";

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

  return (
    <div>
      <h1>Rooks: useWindowSize Example</h1>
      <hr></hr>

      <div
        style={{
          display: "flex",
          flexDirection: "column",
          alignItems: "center",
          backgroundColor: "skyBlue",
        }}
      >
        <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>
    </div>
  );
}

export default App;

Returned Object keys

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

Join the community!

Join our discord server! You can click the floating discord icon at the bottom right of the screen and chat with us!

Powered by vercel