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

Prop	Type	Required
`children`	`func`	true

WindowSize children

children: (size: { width: number; height: number }) => React.ReactElement<any, 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;};