Edit in GitHubLog an issue

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

NameTypeDescription
propsObjectReact component props

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:

Copied to your clipboard
1return (
2 <WindowSizeContextProvider>
3 <App />
4 </WindowSizeContextProvider>
5);

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

Copied to your clipboard
1import { useWindowSize } from "@magento/peregrine";
2
3function MyComponent(props) {
4 const windowSize = useWindowSize();
5
6 return (
7 <span>
8 Inner window size: {windowSize.innerWidth} x {windowSize.innerHeight}
9 </span>
10 );
11}
  • Privacy
  • Terms of Use
  • Do not sell my personal information
  • AdChoices
Copyright © 2022 Adobe. All rights reserved.