Skip to content

pedro-lb/use-window-size-hook

Repository files navigation

use-window-size-hook

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

NPM JavaScript Style Guide

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.