If you have any project questions, concerns, or contribution ideas, join our #pwa Slack channel. Find out how to create an account by visiting Community Resources

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

useWindowSize : number

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

Use this inside a WindowSizeContextProvider.

Kind: global constant

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

Kind: global function
Summary: A React context provider.
Returns: Context.Provider - A React context provider

Param Type Description
props Object React component props

For implementation details View Source.

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>
  );

}