useResponsiveValue

Screen size: Loading...
{(function MyComponent() {
  const responsiveValue = useResponsiveValue()

  return (
    <Stack space="medium">
      <Text>
        Screen size:{" "}
        <Strong>
          {responsiveValue({
            mobile: "Small",
            desktop: "Large",
          }) || "Loading..."}
        </Strong>
      </Text>
    </Stack>
  )
})()}
This Hook will resolve values in a mobile-first manner based on the breakpoint the browser viewport currently falls within (mobile, tablet, desktop or wide).
As this can only be calculated in the browser, the value will also be null when rendering server-side or statically rendering. Window resizing is supported.
Note that this Hook returns a function so that it can be called anywhere within your component.
The responsiveValue function used in these examples is automatically available in Playroom. You do not need to call the useResponsiveValue function.
If you want to detect whether a certain breakpoint is currently active, boolean values can also be provided.
const responsiveValue = useResponsiveValue()

const isMobile = responsiveValue({
  mobile: true,
  tablet: false,
})

const isDesktopOrAbove = responsiveValue({
  mobile: false,
  desktop: true,
})