use-window-size-hook
TypeScript icon, indicating that this package has built-in type declarations

1.1.22 • Public • Published

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{
    layoutxs | sm | md | lg | xl | undefined;
 
    isXsboolean;
    isSmboolean;
    isMdboolean;
    isLgboolean;
    isXlboolean;
 
    isXsOrBelowboolean;
    isSmOrBelowboolean;
    isMdOrBelowboolean;
    isLgOrBelowboolean;
    isXlOrBelowboolean;
 
    isXsOrAboveboolean;
    isSmOrAboveboolean;
    isMdOrAboveboolean;
    isLgOrAboveboolean;
    isXlOrAboveboolean;
  };
}

Screen Breakpoints

{
  xsnumber; // defaults to 0px
  smnumber; // defaults to 576px
  mdnumber; // defaults to 768px
  lgnumber; // defaults to 992px
  xlnumber; // defaults to 1200px
}

License

MIT © pedro-lb


This hook is created using create-react-hook.

Package Sidebar

Install

npm i use-window-size-hook

Weekly Downloads

278

Version

1.1.22

License

MIT

Unpacked Size

83.5 kB

Total Files

32

Last publish

Collaborators

  • pedrobini