Responsive design in React

Hi, I’m Ayc0, maintainer of the library @blocz/react-responsive that aims to provide easy utils in React to handle Responsive design.

If you want to learn more about it, you can check this post:

@blocz/react-responsive v3 is out @blocz/react-responsive v3 was just released. Let’s go through all the different features and changes added by this new major version

This article will tell you how not to use this library.

When not to use @blocz/react-responsive

Often, I get people asking me how to use @blocz/react-responsive to handle different display at different screen sizes, or on mobile.
Usually my answer is: use plain CSS and media queries.

CSS is my go-to method when I want handle responsive design:

• it’s easy @media (max-width: Xpx)
• it’s static and doesn’t require JS to run (more efficient for the end user)

Then why did you create this library if you don’t recommend it?

I do recommend it, but not for all use-cases.

1. @blocz/react-responsive was developed to allow developers to render different components depending of viewport size.
   For instance, you want to render a dropdown option on desktop and a floating button action on mobile and you already have both components developed.

2. The second use-case was to be able to have breakpoints that could be used at the same time in the JS and in CSS-in-JS, that you can set top level in your app and re-use in an easy way.

To sum up

If you just need to change how a component looks depending on the viewport size, you should use plain CSS. But if you need a finer control in your JS, you can look at ways to do that in JS and why not give a try to @blocz/react-responsive.