App Size Provider

The AppSizeProvider is used to determine the viewport size through media queries.

This is included in the CoreProviders and should normally be used instead.

Only once instance of the AppSizeProvider can be mounted in the app or else an error will be thrown.

Configuration

react-md uses the following media queries to determine the app size:

phone - @media screen and (max-width: 47.9375em)
tablet - @media screen and (min-width: 48em)
tablet-only - @media screen and (min-width: 48em) and (max-width: 64em)
desktop - @media screen and (min-width: 64.0625em)
large-desktop - @media screen and (min-width: 80em)

To change these values, update the Sass variables and appSizeQueries.

import { AppSizeProvider } from "@react-md/core/media-queries/AppSizeProvider";
import { type AppSizeQueries } from "@react-md/core/media-queries/appSize";
import { type ReactNode } from "react";

// these are the defaults and can be numbers or strings
const APP_SIZE_QUERIES: AppSizeQueries = {
  phoneMaxWidth: "47.9375em",
  tabletMinWidth: "48em",
  tabletMaxWidth: "64em",
  desktopMinWidth: "64.0625em",
  desktopLargeMinWidth: "80em",
};

export function RootProvider({ children }: { children: ReactNode }): ReactNode {
  return <AppSizeProvider {...APP_SIZE_QUERIES}>{children}</AppSizeProvider>;
}

@use "@react-md/core" with (
  $phone-max-width: 47.9375em,
  $tablet-min-width: 48em,
  $tablet-max-width: 64,
  $desktop-min-width: 64.0625em,
  $large-desktop-min-width: 80em
);

Use App Size

Once the AppSizeProvider has been mounted somewhere near the root of your app, the current app size can be retrieved by the useAppSize hook. The app size is used internally for the layout, menu components, and tabs components.

Try resizing the browser to see the values updating.

{
  "isPhone": false,
  "isTablet": false,
  "isDesktop": true,
  "isLargeDesktop": false,
  "isLandscape": true
}

"use client";

import { useAppSize } from "@react-md/core/media-queries/AppSizeProvider";
import { type ReactElement } from "react";

export default function UseAppSizeExample(): ReactElement {
  const { isDesktop, isLandscape, isLargeDesktop, isPhone, isTablet } =
    useAppSize();

  return (
    <pre>
      <code>
        {JSON.stringify(
          {
            isPhone,
            isTablet,
            isDesktop,
            isLargeDesktop,
            isLandscape,
          },
          null,
          2,
        )}
      </code>
    </pre>
  );
}

"use client";

import { useAppSize } from "@react-md/core/media-queries/AppSizeProvider";
import { type ReactElement } from "react";

export default function UseAppSizeExample(): ReactElement {
  const { isDesktop, isLandscape, isLargeDesktop, isPhone, isTablet } =
    useAppSize();

  return (
    <pre>
      <code>
        {JSON.stringify(
          {
            isPhone,
            isTablet,
            isDesktop,
            isLargeDesktop,
            isLandscape,
          },
          null,
          2,
        )}
      </code>
    </pre>
  );
}