responsivePropDependency

import { responsivePropDependency } from "reshaped";

When using responsive properties in your components, you might need to resolve another value based on one of surch properties. For example, you might want to change the size of an icon based on the size property of a button. In such cases, you can use the responsivePropDependency utility.

After passing a property to it, it uses a callback function to resolve the value for each viewport.

<Button size={{ s: 'large', l: 'medium' }} />

...

const iconSize = responsivePropDependency(size, (size) => {
  return size === "large" ? 5 : 4;
});

(prop: T | Responsive<T>, callback: (prop: T) => O): O | Responsive<O>;