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.

Resize window to render different texts in the demo below.

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