useResponsiveValue

The returned function returns null when rendering server-side or statically, so you should avoid this Hook where possible. Responsive props and media queries are preferable in most cases.

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>
  )
})()}

Open in Playroom

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 is automatically provided for you in the Braid Playroom.

Alternatives

Box — For custom layouts.
Hidden — For responsively hiding content.
responsiveStyle — For custom styles.

Playroom prototyping

The responsiveValue function used in these examples is automatically available in Playroom. You do not need to call the useResponsiveValue function.

Boolean logic

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,
})

Braid Logo