window-dimensions-hooks

> React hooks for getting browser window dimensions, even during and after resizing

  

Install

``bash
npm install --save window-dimensions-hooks
`

Usage

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.

$3

The useWindowWidth hook returns a number value. The variable is updated when window is resized.

`jsx
import React from "react";

import { useWindowWidth } from "window-dimensions-hooks";

const MyComponent = () => {
let width = useWindowWidth();
return

;
};
`

$3

Just like useWindowWidth, the useWindowHeight hook simply returns a number value of the window's height. The variable is updated when window is resized.

`jsx
import React from "react";

import { useWindowHeight } from "window-dimensions-hooks";

const MyComponent = () => {
let height = useWindowHeight();
return

;
};
`

$3

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.

`jsx
import React from "react";

import { useWindowDimensions } from "window-dimensions-hooks";

const MyComponent = () => {
let { height, width } = useWindowDimensions();
return (



);
};
``

---

Thank You

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.

License

MIT © jacobdcastro