Responsive Web Page: React-Responsive

Making any web application fully responsive all the way down to mobile size can be a tricky task. Thankfully, there is yet again another react package that simplifies our life as a developer. Incomes, react-responsive. A very easy to use package that allows you to wrap media queries around your actual components. Let’s take a look.

Install react-responsive here.

Set up and usage is very quick and easy. Here is an example.

All you need is to import MediaQuery from react-responsive and you can get busy.

We establish our entire page container with our most parent level div and can write our responsive media queries. Our each query takes in attributes like maxWidth or minWidth. Another important attribute you can establish is orientation.

<MediaQuery maxWidth={600} orientation="portrait">
<h1>This is for phones</h1>
</MediaQuery>

You can establish orientation to portrait or landscape depending on your screen size. This allows you to have great control over your breakpoints all from your js files. There are other keys that media query takes so be sure to check out the docs for more info.

Hope you guys enjoyed this quick post!