useBreakpointProps

useBreakpointProps is a hook that returns an object with all matching props that are passed in. In case of multiple props matching and having the same property, the last matching prop takes precedence.

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

Props

BreakpointProps

Name	Type	Default	Description
matches		-	Whether the breakpoint is matched.
props	T	-	The props that should be applied if the breakpoint is matched.