Homehooks

useResponsiveValue

Resolve a responsive value at runtime.

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.

Overview

The useResponsiveValue hook can be used to resolve values in a mobile-first manner based on the breakpoint the browser viewport currently falls within. The size of the browser is watched for changes and updated dynamically.

function useResponsiveValue<T extends string | number>(
  value: ResponsiveValue<T>,
): T | null

As this can only be done in browser, on the server or static rendering it will return null.

Usage

This hook is often useful together with components like Carousel to calculate the overflows by resolving the runtime value of itemsPerPage.

Following is an example usage of the hook. The resolvedItemsPerPage will be one of 1, 3, or 5 depending on the size of the browser.

const resolvedItemsPerPage = useResponsiveValue({
  mobile: 1,
  tablet: 3,
  desktop: 5,
})
 
const isLastPage =
  currentPage >= numberOfItems / resolvedItemsPerPage - 1 ? true : false