1234567891011121314151617181920212223import React, { ReactElement } from "react";
import { TextContainer, Text } from "@react-md/typography";
import { AppSizeListener, useAppSize } from "@react-md/utils";

function CurrentSize(): ReactElement {
  const context = useAppSize();
  return (
    <TextContainer>
      <Text type="headline-6">The current app size is:</Text>
      <pre>
        <code>{JSON.stringify(context, null, 2)}</code>
      </pre>
    </TextContainer>
  );
}

export default function Demo(): ReactElement {
  return (
    <AppSizeListener>
      <CurrentSize />
    </AppSizeListener>
  );
}