Skip to content

jasonjin220/use-window-size-v2

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

23 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

useWindowSize()

Node version NPM total downloads npm bundle size (minified) NPM license

React hook to obtain the current window size in React apps.

useWindowSize() automatically updates width and height values when screen size changes. You can get your application window's width and height like this:

const { width, height } = useWindowSize();

Installation

npm install use-window-size-v2

or

yarn add use-window-size-v2

Usage

This hook returns the current width and height of the window. It is debounced, meaning it will wait delay milliseconds (0ms by default) for the resize events to stop firing before it actually updates its state with the new width and height.

Parameter (optional)

Key Type Default Description
delay number 0 The amount of time in milliseconds you want to wait after the latest resize event before updating the size of the window in state.

Return object

Type Description
width number The current width of the window
height number The current height of the window

Example

Edit react-hook-usewindowsize

import useWindowSize from "use-window-size-v2";

const App = () => {
  const { width, height } = useWindowSize(100); // wait 100ms for the resize events

  return (
    <div>
      <p>Window Width: {width}px</p>
      <p>Window Height: {height}px</p>
    </div>
  );
};

export default App;