@screen-fit/screen-fit-react

screen-fit 的 React 绑定。提供 <ScreenContainer> 与 hooks。

安装

pnpm add @screen-fit/screen-fit-react

Peer：react >= 17

快速开始

import { ScreenContainer } from '@screen-fit/screen-fit-react';

export default function App() {
  return (
    <>
      <div className="screen-bg" />
      <ScreenContainer designWidth={1920} designHeight={1080}>
        <Dashboard />
      </ScreenContainer>
    </>
  );
}

组件 API

| Prop | 类型 | 默认 | 说明 | |---|---|---|---| | designWidth | number | 1920 | 设计稿宽 | | designHeight | number | 1080 | 设计稿高 | | mode | AdaptMode | 'contain' | 缩放模式 | | minScale | number | 0 | 缩放下限 | | maxScale | number | Infinity | 缩放上限 | | rotateOnPortrait | boolean | false | 竖屏旋转 | | hideUntilReady | boolean | true | 首屏防闪烁 | | className / style | - | - | 常规 | | children | ReactNode | - | 内容 |

Ref：forwardRef<ScreenAdapter>，ref.current 即适配器实例。

Hooks

useScreenInfo(): AdaptInfo | null

const info = useScreenInfo();
if (!info) return null;
return <div>{info.viewportWidth}</div>;

useScreenAdapter(): ScreenAdapter | null

const adapter = useScreenAdapter();
useEffect(() => adapter?.refresh(), [adapter]);

进阶

ECharts 联动

transform: scale 下 ECharts 容器尺寸不变，普通 resize 无需 chart.resize()。

const info = useScreenInfo();
useEffect(() => {
  requestAnimationFrame(() => chartRef.current?.resize());
}, [info?.isUltraWide]);

弹窗用 Portal

import { createPortal } from 'react-dom';

createPortal(<div className="modal">...</div>, document.body);

License

MIT