useContainerBreakpoint
useContainerBreakpoint
is a hook used to determine if the document matches a
media query string (or media query list) by comparing it to a container. It will
listen to the breakpoints specified and will return a boolean value indicating
if this media query is met or not. It internally relies on the useContainerSize
hook to determine the width and height of the container based on its ref.
Import
import { useContainerBreakpoint } from '@dynatrace/strato-components-preview/core';
Use cases
The media query syntax is similar to the CSS one, which can be checked here. However, only width and height-related queries are currently supported (not orientation queries like orientation, prefers-color-scheme, etc.).
Single media query
The simplest way to use it is as follows:
const above500 = useContainerBreakpoint('(min-width: 500px)', containerRef);
The result, above500
, is a boolean indicating whether the media query matches
successfully, so whether the minimum width of the container is 500px.
Multiple media queries
An array of media queries can also be passed in as follows:
const [above500, above1000] = useContainerBreakpoint([ '(min-width: 500px)', '(min-width: 1000px)' ], containerRef);
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 container is 1000px.
Caveats
Do not overuse this query, since it still has a high performance impact in combination with a very large number of containers and resizing events. Also, avoid styling the container's width/height depending on the result of this query or do it sensibly, since it might run into an endless render cycle.
Example: Don't add style={{ width: restrictedWidth ? '900px' : '300px') }}
on
the container, where the media query used is
'(min-width: 130px) and (max-width: 800px)'
.
Moreover, since only width and height-related queries can be supported and wrong usages can lead to endless render cycles, this is a temporary solution until the native CSS container queries are available.