React hooks for getting browser window dimensions, even during and after resizing
npm install --save window-dimensions-hooks
This module gives access to 3 different hooks.
useWindowWidth
useWindowHeight
useWindowDimensions
All three hooks give access to number values represented by the window.innerWidth
and window.innerHeight
property values. The hooks also live-update the variable when the window is resized.
Note: All hooks are named exports. Therefore you must specify which hook you want to import using the object destructuring syntax, as shown in code examples below.
The useWindowWidth
hook returns a number value. The variable is updated when window is resized.
import React from "react";
import { useWindowWidth } from "window-dimensions-hooks";
const MyComponent = () => {
let width = useWindowWidth();
return <div>Window width is {width}px.</div>;
};
Just like useWindowWidth
, the useWindowHeight
hook simply returns a number value of the window's height. The variable is updated when window is resized.
import React from "react";
import { useWindowHeight } from "window-dimensions-hooks";
const MyComponent = () => {
let height = useWindowHeight();
return <div>Window height is {height}px.</div>;
};
Unlike the previous hooks, the useWindowDimensions
hook returns an object with height and width key-value pairs. Therefore, you can use object destructuring to pull the height and width values from the object.
Just as before, the values of the height/width keys in the object are live-updated when the browser window is resized.
import React from "react";
import { useWindowDimensions } from "window-dimensions-hooks";
const MyComponent = () => {
let { height, width } = useWindowDimensions();
return (
<div>
<p>Window height is {height}px</p>
<p>Window width is {width}px</p>
</div>
);
};
Thank you so much for checking out these hooks! Feel free to submit a PR or issue and I'll be happy to look into it! I love collaborating and I'm always happy to help you improve this package.
MIT © jacobdcastro