If you are a web application developer, you are possibly familiar with Responsive Design concept and you know how important it is for your application to adapt to different screen sizes on different devices.

There are many ways you can control your page responsiveness including using media queries in CSS or in JavaScript.

Today, I am going to show you how you can create a custom React Hook which can then be used as a size sensor in your apps.

I will use React Context and TypeScript in implementing this, so I assume you are already familiar with those concepts.

---

We will start by creating a component named __ResponsiveProvider__ that we will then wrap our main component in, down the track.

gist:2dc49dfa54d036cb588cdf275f6c1217

Nothing special so far.

As you can see, the __value prop__ of the __context provider__ is empty for now.

We need an object containing different boolean properties for different screen sizes. Let’s write a function which returns that object with default values.

gist:172dd291965805a6ca7bcde501d3dc11

As you can see, I have created a __TypeScript interface__, a __function type__ and then the actual function which returns the object.

Now we add the needed definitions and parts to the component we created before.

gist:73ca8bb92d0eedbce39c7106eb65d303

Is it difficult? I don’t think so.

Let’s see what’s going on here.

The __detectDevice__ function gets a new object from the __getDefaultScreenSizeObject__ we created before and sets its different values depending on the current screen size.

This function is called 2 times. First, during the __screenSize__ state initialization and then whenever our window size changes. You can see we are monitoring window size changes in the __useEffect__ hook we have added.

Then the screenSize state object is assigned to the context provider’s value prop.

Now all we need to do, is to define our actual custom hook which we call it __useSensor__.

gist:7667d1c6f75c773db86fb6f89b84d988

The __useSensor__ custom hook reads the __value prop__ from the __context provider__, monitors the __screenSize__ object changes and then returns its latest value.

Now let’s have a look at the completed code.

gist:6834268cd40109db9bf448ae7ca90d2f

Now all we need to do, is to wrap our main component inside __ResponsiveProvider__ so then we can use the __useSensor__ hook wherever we need within our app.


Implementing a screen size sensor as a custom React Hook

Learn how to implement your own Hook to listen to screen size changes!

Implementing a React screen size sensor Hook