@dschz/ 固态自动喷雾器

一个SolidJS组件会自动测量并提供其母容器的宽度和高度,使其适合响应性布局和虚拟化组件.

灵感来自 React 虚拟化自动监视器,这个组件为SolidJS带来了同样的强大的自动变速能力,具有诸如调整观察员API等现代改进和反应信号,以提高性能和开发者的经验.

* 特性

• 🔍 现代调整观察员 API - 提高性能和可靠性
• ⚡ 反应更新 - 使用SolidJS信号进行高效的再着陆
• 🎛️ 自定义初始尺寸 - 为初始渲染设定默认宽度/ 高度
• 📞 可选的调用大小 - 大小变化时得到通知
• 🎨 样式和类道具支持 - 完全灵活
• 📦 轻巧 - 零依赖最小捆绑大小

* 安装

通过您最喜欢的软件包管理器安装 :

npm install solid-js @dschz/solid-auto-sizer
pnpm install solid-js @dschz/solid-auto-sizer
yarn install solid-js @dschz/solid-auto-sizer
bun install solid-js @dschz/solid-auto-sizer

这是一个 同伴依赖,因此必须手动安装:

• solid-js@>=1.6.0

QQ 快速启动

import { AutoSizer } from "@dschz/solid-auto-sizer";

function MyComponent() {
  return (
    <div style={{ width: "100%", height: "400px" }}>
      <AutoSizer>
        {({ width, height }) => (
          <div style={{ width: `${width}px`, height: `${height}px` }}>
            Content that adapts to container size: {width} × {height}
          </div>
        )}
      </AutoSizer>
    </div>
  );
}

使用实例

基本用途

import { AutoSizer } from "@dschz/solid-auto-sizer";

<AutoSizer>{({ width, height }) => <canvas width={width} height={height} />}</AutoSizer>;

有初始尺寸

<AutoSizer initialWidth={400} initialHeight={300}>
  {({ width, height }) => <MyChart width={width} height={height} data={data} />}
</AutoSizer>

调整回调大小

<AutoSizer
  onResize={({ width, height }) => {
    console.log(`Container resized to: ${width}x${height}`);
  }}
>
  {({ width, height }) => <VirtualizedList width={width} height={height} items={items} />}
</AutoSizer>

带有自定义样式

<AutoSizer
  class="my-auto-sizer"
  style={{
    "background-color": "#f0f0f0",
    border: "1px solid #ccc",
    padding: "10px",
  }}
>
  {({ width, height }) => (
    <div>
      Styled container: {width} × {height}
    </div>
  )}
</AutoSizer>

API 参考

道具

类型

type Size = {
  readonly width: number;
  readonly height: number;
};

type AutoSizerProps = {
  readonly class?: string;
  readonly style?: Omit<JSX.CSSProperties, "width" | "height">;
  readonly initialWidth?: number;
  readonly initialHeight?: number;
  readonly onResize?: (size: Size) => void;
  readonly children: (size: Size) => JSX.Element;
};

互动游戏场

探索AutoSizer能力 与我们的综合操场应用! 游乐场包括:

• 基本实例 - 简单的响应内容、调整召回大小、自定义尺寸、弹性框集成
• 图表和可视化 - 对应的条形图、线形图、馅饼图和仪表板
• 虚拟列表和网格 - 具有1K-100K项目、可搜索列表、可变高度的性能演示
• 实时演示 - 可以调整大小和修改的交互式实例

运行游戏场

# Clone the repository
git clone https://github.com/dsnchz/solid-auto-sizer.git
cd solid-auto-sizer

# Install dependencies
npm|pnpm|yarn|bun install

# Start the development server
npm|pnpm|yarn|bun start

游乐场将在 http://localhost:3000 并展示现实世界使用的案例包括:

• 📊 图表整合 - 看看AutoSizer如何与数据可视化工作
• 📋 虚拟滚动 - 用大型数据集进行性能测试
• 🎨 样式示例 - 自定义主题和响应性设计
• ⚡ 业绩监测 - 实时调整活动规模跟踪

常见案件

图表和可视化

import { AutoSizer } from "@dschz/solid-auto-sizer";
import { LineChart } from "my-chart-library";

<div style={{ width: "100%", height: "400px" }}>
  <AutoSizer>
    {({ width, height }) => <LineChart width={width} height={height} data={chartData} />}
  </AutoSizer>
</div>;

虚拟列表

import { AutoSizer } from "@dschz/solid-auto-sizer";
import { VirtualList } from "my-virtualization-library";

<div style={{ width: "100%", height: "600px" }}>
  <AutoSizer>
    {({ width, height }) => (
      <VirtualList
        width={width}
        height={height}
        itemCount={items.length}
        itemSize={50}
        renderItem={({ index }) => <div>{items[index].name}</div>}
      />
    )}
  </AutoSizer>
</div>;

响应网格

import { AutoSizer } from "@dschz/solid-auto-sizer";

<AutoSizer>
  {({ width }) => {
    const columns = Math.floor(width / 200); // 200px per column
    return (
      <div
        style={{
          display: "grid",
          "grid-template-columns": `repeat(${columns}, 1fr)`,
          gap: "16px",
        }}
      >
        {items.map((item) => (
          <GridItem key={item.id} {...item} />
        ))}
      </div>
    );
  }}
</AutoSizer>;

QQ 浏览器支持

自动监视器使用 调整观察员 API 的大小,支持方式为:

• 色调 64+
• Firefox 69+ (英语)
• 萨法里13.1+
• 边缘79+

对于更古老的浏览器,您可以使用 调整观察员多填充的大小。 。 。 .

许可证

麻省理工学院执照 - 看 自由主义 详细文件.

承认

• 灵感来自 React 虚拟化自动监视器
• 与 固态JS