ChocolateLoverRaj / use-window-size-hook

React Hook to monitor window size & layout.

use-window-size-hook

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

Install

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

or

yarn add use-window-size-hook

Usage

import React from 'react';

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

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

  return (
    <>
      <p>
        {`Window width: ${width}`}
      </p>

      <p>
        {`Window height: ${height}`}
      </p>

      <p>
        {`Screen layout according to Bootstrap 4: ${screenLayout.layout}`}
      </p>

      <p>
        {`Is md layout: ${screenLayout.isMd}`}
      </p>

      <p>
        {`Is xs layout or below: ${screenLayout.isXsOrBelow}`}
      </p>

      <p>
        {`Is lg layout or above: ${screenLayout.isLgOrAbove}`}
      </p>
    </>
  );
};

Compare layout breakpoints

import React from 'react';

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

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

  const isBiggerThanMd = screenLayout > layout.md;

  return (
    <>
      <p>
        {isBiggerThanMd ? "Layout is bigger than md" : "Layout is md or smaller"}
      </p>
    </>
  );
};

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

useWindowSize result

{
  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;
  };
}

Screen Breakpoints

{
  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.