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.
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.
@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.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
.
Top comments (0)