Bifrost Design System

useBreakpoint()

import useBreakpoint from "@intility/bifrost-react/hooks/useBreakpoint";

Avoid using with SSR/SSG and unit testing

The useBreakpoint hook depends on window.matchMedia, which only exists in the browser, and cannot be used for server-side rendering or unit testing. Testing responsive code should be done in a browser, for instance check out cypress.io

See CSS breakpoint docs where class names are documented, which is usually what you want and are also safe for SSR/SSG and unit testing.

The hook will return true or false based on current viewport width.

Usage: useBreakpoint(from, to) where from and to are optional viewport width keywords:

'small' = 600px
'medium' = 960px
'large' = 1280px
'xl' = 1600px
'xxl' = 1920px

If you omit to parameter, the hook will return true for all viewports wider than from, and vice versa. Pass null as first param to omit from parameter instead.

import useBreakpoint from "@intility/bifrost-react/hooks/useBreakpoint";

export default function () {
  const toSmall = useBreakpoint(null, "small");
  const fromSmallToMedium = useBreakpoint("small", "medium");
  const fromMedium = useBreakpoint("medium");
  return (
    <>
      {toSmall && "only displayed up to small (0px-599px)"}
      {fromSmallToMedium &&
        "only displayed between small and medium (600px-959px)"}
      {fromMedium && "only displayed for medium and larger (960px +)"}
    </>
  );
}

Open Sandbox

If you need a specific pixel breakpoint, use a custom media query instead (with matchMedia if you need a JS listener).