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.

Functions

WindowSizeContextProvider(props) ⇒ Context.Provider

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

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:

Copy
return (
  <WindowSizeContextProvider>
    <App />
  </WindowSizeContextProvider>
);
Copied to your clipboard
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.

Copy
import { useWindowSize } from "@magento/peregrine";

function MyComponent(props) {
  const windowSize = useWindowSize();

  return (
    <span>
      Inner window size: {windowSize.innerWidth} x {windowSize.innerHeight}
    </span>
  );
}
Copied to your clipboard
import { useWindowSize } from "@magento/peregrine";

function MyComponent(props) {
  const windowSize = useWindowSize();

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

Last updated 9/13/2023

Was this helpful?

Yes

No