react-responsive-scale/dist/index.d.ts

A React component for responsive scaling of data dashboards

import * as react from 'react';
import * as react_jsx_runtime from 'react/jsx-runtime';

type ScaleContextType = {
    /**
     * 内容区域实际宽度
     */
    rootWidth: number;
    /**
     * 内容区域实际高度
     */
    rootHeight: number;
    /**
     * 根元素字体大小
     */
    rootValue: number;
    /**
     * 基于内容区域宽度百分比计算尺寸
     */
    calcWidth: (percent: number) => number;
    /**
     * 基于内容区域高度百分比计算尺寸
     */
    calcHeight: (percent: number) => number;
    /**
     * 基于设计稿尺寸计算当前屏幕下的实际尺寸
     */
    calcPx: (px: number) => number;
    /**
     * 基于设计稿尺寸和当前跟元素字体大小计算rem
     */
    calcRem: (px: number) => `${number}rem`;
};
declare const ScaleContext: react.Context<ScaleContextType>;

type ReactResponsiveScaleProps = {
    /**
     * html标签字体大小
     * @default 16
     */
    rootValue?: number;
    /**
     * 内容区域设计稿宽度
     * @default 1920
     */
    rootWidth?: number;
    /**
     * 设内容区域计稿高度
     * @default 1080
     */
    rootHeight?: number;
    /**
     * 尺寸计算精度
     * @default 5
     */
    precision?: number;
    /**
     * 浏览器窗口尺寸变更后重新计算尺寸的防抖时间间隔
     * @default 300
     */
    wait?: number;
    /**
     * 窗口背景色
     */
    backgroundColor?: string;
    /**
     * 窗口背景图
     */
    backgroundImage?: string;
    style?: React.CSSProperties;
    children?: React.ReactNode;
};
declare function ReactResponsiveScale(props: ReactResponsiveScaleProps): react_jsx_runtime.JSX.Element;

export { ReactResponsiveScale, type ReactResponsiveScaleProps, ScaleContext, type ScaleContextType, ReactResponsiveScale as default };