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.

v30.1.0

Jul 8, 2021

Add useResponsiveValue Hook

This Hook will return the resolved value 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.

Note that this Hook returns a function so that it can be called anywhere within your component.

EXAMPLE USAGE

const responsiveValue = useResponsiveValue();

const screenSize = responsiveValue({
  mobile: 'Small',
  desktop: 'Large',
});

You can also resolve to boolean values for breakpoint detection.

const responsiveValue = useResponsiveValue();

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

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

Braid Logo