useBreakpoint

Import

import { useBreakpoint } from '@dynatrace/strato-components/layouts';

Use cases

The media query syntax is similar to the CSS one, which can be checked here

Single media query

A single media query can be passed in, similar to the following: const above500 = useBreakpoint('(min-width: 500px)');.

The result, above500, is a boolean indicating whether the media query matches successfully, so whether the minimum width of the window is 500px.

CodeSandbox

Multiple media queries

An array of media queries can also be passed in as follows:

const [above500, above1000] = useBreakpoint([ '(min-width: 500px)', '(min-width: 1000px)' ]);

The result is an array, in which the first item above500, is a boolean indicating whether the first media query matches successfully, so whether or not the minimum width of the window is 500px, and the second item, above1000, is a boolean indicating whether the second media query matches successfully, so whether the minimum width of the window is 1000px.

CodeSandbox