useBreakpoint

useBreakpoint is a hook used to determine if the document matches the media query string (or media query list). It will listen to the breakpoints specified and will return a boolean value indicating if this media query is met or not.

Import

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

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