How to define minimum supported screen size with MUI/ReactJS?

user_430720 0
Viewed 425

I am using Material UI 5.6 in a webapp that requires large viewport. I want to define a minimum screen width for the entire app such that:

  1. If users access the app on devices with smaller width, the app should not resize beyond the defined minimum width.
  2. If users access the app on devices with smaller width, show them a warning message that we dont fully support their device.

Is this achievable with MUI, or I need another library for this?

material-ui reactjs
1 Answers

The first requirement is achievable through styling and media-queries and can be achievable either with plain CSS or with MUI-specific styling tools.

The second requirement can be implemented with useMediaQuery hook in several ways:

Restrict users with unsupported devices to use the app

You can wrap the entire app in a wrapper-component where you define the required min-width

  const requiredWidth = useMediaQuery("(min-width:1024px)");

Then you can return UI of your App or the screen with a message that the device is not supported:

  return requiredWidth ? (
    { children }
  ) : (
    <p>We do not fully support your device </p>
  );

In this case, the entire app will be unavailable for the user.

Show an alert

Another option is to use the same wrapper component and render an Alert or Snackbar which will be rendered alongside the rest of the UI of your app :

  return (
    <>
      {children}
      {requiredWidth && <AlertComponent />}
    </>
  );

In this case, a user will be notified about their device but still be able to use the app.

user_141906900
Related