Skip to main content

    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
    Still have questions?
    Find answers in the Dynatrace Community