useBreakpoint

This Hook has been deprecated in favour of useResponsiveValue.

This is because useBreakpoint leads consumers to inadvertently couple themselves to the current set of breakpoints, making it risky for us to introduce new breakpoints.

For example, you may have chosen to detect large screens by checking that the user is on the (current) largest breakpoint (e.g. const isDesktop = useBreakpoint() === "desktop"), but this logic would break if we introduced an even larger breakpoint and the Hook started returning other values.

To maintain backwards compatibility, useBreakpoint will continue to return "desktop" when the user is technically on larger breakpoints.

Current breakpoint:

<Text>
  Current breakpoint: <Strong>{useBreakpoint()}</Strong>
</Text>

Open in Playroom

Alternatives

Box — For custom layouts.

Development considerations

This Hook will return the breakpoint the browser viewport currently falls within (mobile, tablet, desktop). To maintain backwards compatibility, breakpoints above desktop will still be reported as desktop. 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.

const breakpoint = useBreakpoint()

return <Text>Current breakpoint: {breakpoint}</Text>

Braid Logo