useBreakpoint Hook — Get Media Query Breakpoints in React

Creating a custom Hook to get window widths or breakpoints

Photo by Mikael Kristenson on Unsplash

You can easily choose your UI design based on viewport width in CSS using media queries, but sometimes you need to get the window width or breakpoints to adjust your UI as per the viewport width in React.

To accomplish that in React, we will create one custom Hook, useBreakpoint, which will give us xs, sm, md, and lg, based on the window width.

What and When We Need to Measure?

To get breakpoints, we need to measure the browser’s width, and we get that width on the window object. window objects have two widths: outerWidth and innerWidth, and we will use only innerWidth.

Now we have what we need to measure, but when do we need to measure it. We measure the window.innerWidth whenever we resize our window.

function calcInnerWidth() {
  /* Get window inner width here */
}
window.addEventListener('resize', calcInnerWidth)

So, whenever we resize our window, the resize event gets fired and we calculate the innerWidth, but there is a small issue with implementing things like this, some of you might have caught it.

The callback function calcInnerWidth gets fired every time we resize the window even a little bit, i.e. if we resize our window, let’s say for 100 milliseconds, it will execute the callback function multiple times.

So, to overcome this, we will throttle our callback function at a given interval.

For the throttle function, we will be using the lodash.throttle package.

import throttle from 'lodash.throttle';
/------- Other Code Goes Here ------/
function calcInnerWidth() {
  /* Get window inner width here */
}
window.addEventListener('resize', throttle(calcInnerWidth, 200))

Now, the calcInnerWidth function will get invoked at most once per every 200 milliseconds. This will come in handy when we update our state from inside this callback function.