Hey guys I'm in the process of open sourcing my internal component library (looking for help 👀) and was curious if you have come across many libraries that deal with responsiveness for you. I've used material-ui quite a bit and it's responsiveness is quite hard to use from what I tried. Others like antd I couldn't find support built-in at all.
Would love to hear any that you've used and what your experiences were.
What about material-ui's responsiveness is hard for you to use? I use it quite frequently, largely because it simplifies responsiveness. I'm curious about your experience.
It's modtly the fiddly-ness of it. I like to avoid using components that change the layout at runtime as much as possible because approaches in these libraries like using media query hooks (https://material-ui.com/components/use-media-query/) cause so lots of rerenders and my main project (everypage) tries to be as static as possible. Is this something you think about when developing or not really a problem for your projects?
That's interesting to understand. I have not focused on optimizing the rerenders for my projects. My page speeds / resource utilization with material-ui / react has always been "good enough."
The MUI
<Grid>
and<Hidden>
components solve all my responsive needs and don't have the runtime-only issue of media query hooks. Do you find you often need responsive logic that can't be handled by those components?Yep I've used Grid and Hidden to lay things out but I was more curious about (for example) setting the text alignment to be center in >md and left in <md. Would your approach be to use two different components and show / hide them in this case?
The
<Box>
system props can be response, for example:<Box textAlign={{ xs: "center", md: "left" }}>
Oh nice I hadn't seen this before, will def try it out!