use-window-size-hook

> React Hook to monitor window size & layout according to Bootstrap 4 breakpoints.

 

Install

``bash
npm install --save use-window-size-hook
`

or

`bash
yarn add use-window-size-hook
`

Usage

`jsx
import React from 'react';

import { useWindowSize } from 'use-window-size-hook';

const App = () => {
const {
width,
height,
screenLayout,
} = useWindowSize();

return (
<>



{Window width: ${width}}



{Window height: ${height}}



{Screen layout according to Bootstrap 4: ${screenLayout.layout}}



{Is md layout: ${screenLayout.isMd}}



{Is xs layout or below: ${screenLayout.isXsOrBelow}}



{Is lg layout or above: ${screenLayout.isLgOrAbove}}




);
};
`

$3

`js
import React from 'react';

import { useWindowSize, layout } from "use-window-size-hook";

const App = () => {
const { screenLayout } = useWindowSize();

const isBiggerThanMd = screenLayout > layout.md;

return (
<>



{isBiggerThanMd ? "Layout is bigger than md" : "Layout is md or smaller"}




);
};
`

Props

Name | Type | Required | Default value | Description
:--- | :--- | :--- | :--- | :---
useDebounce | boolean | _optional_ | true | Defines if the callback is going to be executed when the user finishes resizing the screen or not
debounceTimeMs | number | _optional_ | 200 | Debounce time to check when the user finishes resizing the screen
breakpoints | ScreenBreakpoints | _optional_ | Check types below | Defines the breakpoints to be used, you can override and choose your own

Types

$3

`ts
{
width?: number;
height?: number;
screenLayout: {
layout: xs | sm | md | lg | xl | undefined;

isXs: boolean;
isSm: boolean;
isMd: boolean;
isLg: boolean;
isXl: boolean;

isXsOrBelow: boolean;
isSmOrBelow: boolean;
isMdOrBelow: boolean;
isLgOrBelow: boolean;
isXlOrBelow: boolean;

isXsOrAbove: boolean;
isSmOrAbove: boolean;
isMdOrAbove: boolean;
isLgOrAbove: boolean;
isXlOrAbove: boolean;
};
}
`

$3

`ts
{
xs: number; // defaults to 0px
sm: number; // defaults to 576px
md: number; // defaults to 768px
lg: number; // defaults to 992px
xl: number; // defaults to 1200px
}
``

License

MIT © pedro-lb

---

This hook is created using create-react-hook.