useBreakpointValue

useBreakpointValue is a custom hook which returns the value for the current breakpoint from the provided responsive values object. This hook also responds to the window resizing and returning the appropriate value for the new window size.

Tip

Using JavaScript for responsive design should be a last resort. Chances are what you're trying to do can be accomplished with pure CSS via responsive style props.

Import

import { useBreakpointValue } from '@hoverinc/design-system-react-web';

Return value

The useBreakpointValue hook returns the value for the current breakpoint.

Usage

Make sure to provide a fallback value when using useBreakpointValue with SSR so it doesn't return undefined in the first render.

live

function Example() {
  const fill = useBreakpointValue(
    {
      base: 'minimal',
      tablet: 'outline',
      desktop: 'solid',
    },
    {
      // Breakpoint to use when media queries cannot be used, such as in
      // server-side rendering (Defaults to 'base')
      fallback: 'desktop',
    },
  );
  return (
    <VStack align="flex-start" spacing="400">
      <Body>Resize your window to see the button variant change</Body>
      <Button fill={fill}>Button</Button>
    </VStack>
  );
}

useBreakpoint

The useBreakpoint hook simply returns the current responsive breakpoint token.

live

function Example() {
  const breakpoint = useBreakpoint();
  return (
    <VStack align="flex-start" spacing="400">
      <Body>
        The current breakpoint is{' '}
        <Code colorScheme="brandNavy">{breakpoint}</Code>
      </Body>
    </VStack>
  );
}

Server-Side Rendering (SSR)

These hooks are built to work in server-side rendering (SSR) applications by default. You might notice a quick flash of incorrect media query values when you use them.

If you're creating a client-side rendered app, you can leverage the ssr argument to get the correct value on the first render.

const buttonSize = useBreakpointValue(
  { base: 'small', tablet: 'medium' },
  { ssr: false },
);
const breakpoint = useBreakpoint({ ssr: false });

useBoolean

useClipboard

Design System

Settings