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
Name | Type | Description |
---|---|---|
props | Object |
React 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:
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>
);
}