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:
This article will tell you how not to use this library.
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)
I do recommend it, but not for all use-cases.
@blocz/react-responsivewas 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.
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.
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