Custom hook for providing the current app display width in a responsive way.
The hook doesn't take any parameters and returns a set of booleans representing the current screen width.
The three returned booleans are: narrow, medium, wide
narrow: Whether the screen width is below NARROW_UPPER_BOUND (exclusive)medium: Whether the screen width is above NARROW_UPPER_BOUND (inclusive) and below MEDIUM_UPPER_BOUND (exclusive)wide: Whether the screen width is above MEDIUM_UPPER_BOUND (inclusive)
Hook Usage
Checking the current width
const {narrow, medium, wide} = useWidthCheck()
...
if (narrow) {}
else if (medium) {}
else if (wide) {}
It's quick and easy to determine what the current screen width is and display accordingly.
Because they are all booleans, you can also group logic together like:
const {narrow, medium, wide} = useWidthCheck()
...
if (narrow || medium) {}