Skip to content

Window Size

Measure the current window dimensions.

Installation

From the command line in your project directory, run npm install @reach/window-size or yarn add @reach/window-size. Then import the component or hook that you need:

npm install @reach/window-size# oryarn add @reach/window-size
import WindowSize, { useWindowSize } from "@reach/window-size";

Component API

WindowSize

function Example() {  return (    <WindowSize>      {size => (        <div>          <p>Resize your window.</p>          <pre>{JSON.stringify(size, null, 2)}</pre>        </div>      )}    </WindowSize>  );}

WindowSize Props

PropTypeRequired
childrenfunctrue
WindowSize children

children: (size: TWindowSize) => React.ReactElement<any>

A function that calls back to you with the window size.

useWindowSize

A hook that observes and returns the measurements of the browser window.

function Example() {  const { width, height } = useWindowSize();  return (    <div>      <p>Resize your window.</p>      <pre>Window size: {JSON.stringify({ width, height }, null, 2)}</pre>    </div>  );}

useWindowSize signature

function useWindowSize(): {  width: number;  height: number;};