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 = ; return <> <p> `Window width: ` </p> <p> `Window height: ` </p> <p> `Screen layout according to Bootstrap 4: ` </p> <p> `Is md layout: ` </p> <p> `Is xs layout or below: ` </p> <p> `Is lg layout or above: ` </p> </> ;;
Compare layout breakpoints
; ; const App = { const screenLayout = ; const isBiggerThanMd = screenLayout > layoutmd; 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
Screen Breakpoints
License
MIT © pedro-lb
This hook is created using create-react-hook.