@veracity/vui/dist/core/media.d.ts

Veracity UI is a React component library crafted for use within Veracity applications and pages. Based on Styled Components and @xstyled.

import { AnyNumber, AnyString } from "../utils/types.js";
import "../utils/index.js";
import { Screen } from "../theme/types.js";
import "../theme/index.js";
import { ChildrenProp } from "./types.js";
import { FC } from "react";
import { useViewportWidth } from "@xstyled/styled-components";
import { StyledProps } from "styled-components";
//#region src/core/media.d.ts
type ScreenWidth = Screen | AnyNumber | AnyString;
type RenderOnScreenProps = {
  /** Breakpoint to compare viewport width against. */
  maxWidth?: Screen;
  /** Breakpoint to compare viewport width against. */
  minWidth?: Screen;
};
/** Returns CSS media string with appropriate min-width and max-width values. */
declare const mediaBetween: (minWidth: ScreenWidth, maxWidth: ScreenWidth) => (props: StyledProps<unknown>) => string;
/** Returns CSS media string with appropriate max-width value */
declare const mediaDown: (width: ScreenWidth) => (props: StyledProps<unknown>) => string;
/** Returns CSS media string with appropriate min-width value. */
declare const mediaUp: (width: ScreenWidth) => (props: StyledProps<unknown>) => string;
/**
 * Renders its content when viewport width is at or above a provided breakpoint.
 * Optionally, direction can be set to down, or below, the breakpoint.
 */
declare const RenderOnScreen: FC<RenderOnScreenProps & ChildrenProp>;
/** Returns true if current viewport width is smaller than provided width. */
declare function useDown(width: ScreenWidth): boolean;
/** Returns true if current viewport width is larger than or equal to provided width. */
declare function useUp(width: ScreenWidth): boolean;
/** Returns true if current viewport width is between provided min and max widths. */
declare function useBetween(minWidth: ScreenWidth, maxWidth: ScreenWidth): boolean;
//#endregion
export { RenderOnScreen, RenderOnScreenProps, mediaBetween, mediaDown, mediaUp, useBetween, useDown, useUp, useViewportWidth };

//# sourceMappingURL=media.d.ts.map