useBreakpointProps

OverviewProperties

Import

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

Use cases

The simplest way to use it is as follows:

const result = useBreakpointProps([ { matches: true, props: { width: 100, height: 100 } } ]);

The result is an object of the same type as the props object, which can be used for styling purposes.

CodeSandbox

Combine useBreakpointProps and useBreakpoint

The useBreakpointProps hook can use the result of the useBreakpoint to determine if a given media query has a match and returns the given styling props based on the matching query. You can leverage the combination of the two hooks to override certain styles based on the current breakpoint.

CodeSandbox