useWindowSize

Constants

useWindowSize : number

The current context value for the window size context. This value updates whenever the window is resized. Use this inside a [WindowSizeContextProvider](#WindowSizeContextProvider).

Functions

WindowSizeContextProvider(props) ⇒ Context.Provider

This component contains a hook that listens for resize events. Use this component with [useWindowSize](#useWindowSize) to get the value of the resized window. It is recommended to only create/use a single time at the top level of your app

The current context value for the window size context. This value updates whenever the window is resized.

Use this inside a WindowSizeContextProvider.

This component contains a hook that listens for resize events. Use this component with useWindowSize to get the value of the resized window.

It is recommended to only create/use a single time at the top level of your app

Summary: A React context provider.
**Returns: ** Context.Provider — A React context provider

Parameters

Source Code: pwa-studio/packages/peregrine/lib/hooks/useWindowSize.js

Examples

It is recommended to only create/use the WindowSizeContextProvider a single time at the top level of your app:

return(
  <WindowSizeContextProvider>
      <App />
  </WindowSizeContextProvider>
)

Inside a component in your application, use the useWindowSize() function to get the window size value that updates when the window size changes.

import { useWindowSize  } from '@magento/peregrine';

function MyComponent(props) {

  const windowSize = useWindowSize();

  return (
    <span>
      Inner window size: {windowSize.innerWidth} x {windowSize.innerHeight}
    </span>
  );

}