Ricardo Corrales

Building software interfaces requires contemplating multiple devices, while an interface could look and work great on desktop some of its components might not be the best choice for mobile or vice versa.

Let’s take a look at modals and drawers as an example.

Dialogs are the go to way to interrupt users to confirm an action, but they feel out of place on mobile.

For mobile sizes we should use a more native approach like a bottom sheet or a full screen takeover.

Then again, drawers are great for mobile but feel they like not a great choice for desktop.

The right approach would be to use both according to the screen size.

And yes, you can always make use of a useMobile hook and render a different component according to screen size and you will get tired of doing that over and over again, that’s not the point.