DEV Community

Bharath Sriraam R R
Bharath Sriraam R R

Posted on

How do you make responsive designs in React?

How do you peeps handle responsive design in React when using UI libraries like Material-UI and antd? For example converting a side drawer in desktop to a bottom bar in mobile. I'm looking for something that doesn't re-render a lot and is fast.

Top comments (6)

Collapse
 
alirezab7394 profile image
alirezab7394

if you use material ui or other react frameworks,
grid system is good enough for responsive,
beside grid system you can use rem and media screen in html tag for better resualt

Collapse
 
kretaceous profile image
Abhijit Hota

As mentioned by others you can use the built in Grid system in Material-UI.

It has some alternative layouting methods too. Make sure to check their awesome docs!

Collapse
 
styxlab profile image
Joost Jansky

I just moved to tailwindcss and I love it for responsive designs.

Collapse
 
petrtcoi profile image
Petr Tcoi

I use bootstrap layout
You can download only layout alone

Collapse
 
13point5 profile image
Bharath Sriraam R R

Could you give an example?

Collapse
 
petrtcoi profile image
Petr Tcoi • Edited

You can choice what components css to download here getbootstrap.com/docs/3.4/customize/

Then just select only grid css to your index page and you can use all grid classes.

import β€˜/bootstrap_with_grid.css’