@workday/canvas-kit-react/dist/commonjs/common/lib/responsive/useResponsiveContainerStyles.d.ts

The parent module that contains all Workday Canvas Kit React components

import { breakpointKeys } from "@workday/canvas-kit-react/common";
import type { AllStyleProps } from "@workday/canvas-kit-react/layout";
export type BreakpointKeys = typeof breakpointKeys[number];
type ResponsiveCSSObject<T> = {
    [P in keyof T]: Partial<Record<BreakpointKeys, AllStyleProps>> & AllStyleProps;
};
type CSSObject<T> = {
    [P in keyof T]: AllStyleProps;
};
/**
 * useResponsiveContainerStyles
 *
 * ---
 *
 * This hook allows you to create container-based responsive styles with objects.
 * It accepts two or three arguments: the responsive style object, the container width, and (optionally) the theme object.
 * Each style object accepts five breakpoint keys: "zero", "s", "m", "l", and "xl".
 * The sizes will act like `min-width`. For example, if you want to apply styles from `medium` and up, then you would write those styles under `m`.
 *
 * @example
 * ```tsx
import {Flex, Box} from '@workday/canvas-kit-react/layout';
import {
  useResponsiveStyles,
} from '@workday/canvas-kit-react/common';

const ref = React.useRef(null);
const [containerWidth, setContainerWidth] = React.useState(0);

useResizeObserver({
  ref: ref,
  onResize: data => {
    setWidth(data.width || 0);
  },
});

const containerResponsiveStyles = useResponsiveStyles(
  {
    flex: {
      flexDirection: 'column',
      padding: 'm',
      depth: 1,
      borderRadius: 'l',
      zero: {
        backgroundColor: 'Red',
      },
      s: {
        backgroundColor: 'Orange',
      },
      m: {
        backgroundColor: 'Yellow',
      },
      l: {
        backgroundColor: 'Green',
      },
      xl: {
        backgroundColor: 'Blue',
      },
    },
    box: {
      padding: 's',
    },
  },
  containerWidth
);

return (
    <Box ref={ref}>
      <Flex {...containerResponsiveStyles.flex}>
        <Box {...containerResponsiveStyles.box}>Hello World</Box>
      </Flex>
    </Box>
);
```
 */
export declare function useResponsiveContainerStyles<T extends ResponsiveCSSObject<T>>(styles: ResponsiveCSSObject<T>, width: number, theme?: {}): CSSObject<T>;
export {};
//# sourceMappingURL=useResponsiveContainerStyles.d.ts.map