@dschz/solid-auto-sizer

A SolidJS component that automatically measures and provides the width and height of its parent container, making it perfect for responsive layouts and virtualized components.

Inspired by React Virtualized Auto Sizer, this component brings the same powerful auto-sizing capabilities to SolidJS with modern improvements like ResizeObserver API and reactive signals for better performance and developer experience.

✨ Features

• 🔍 Modern ResizeObserver API - Better performance and reliability
• ⚡ Reactive updates - Uses SolidJS signals for efficient re-rendering
• 🎛️ Customizable initial dimensions - Set default width/height for initial render
• 📞 Optional resize callbacks - Get notified when size changes
• 🎨 Style and class prop support - Full styling flexibility
• 📦 Lightweight - Minimal bundle size with zero dependencies

📦 Installation

Install via your favorite package manager:

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

This is a peer dependency, so it must be installed manually:

• solid-js@>=1.6.0

🚀 Quick Start

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>
  );
}

📖 Usage Examples

Basic Usage

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

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

With Initial Dimensions

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

With Resize Callback

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

With Custom Styling

<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 Reference

Props

| Prop | Type | Default | Description | | --------------- | ----------------------------- | ------------ | ----------------------------------------------------------- | | children | (size: Size) => JSX.Element | Required | Render prop that receives the measured dimensions | | initialWidth | number | 0 | Default width for initial render before measurement | | initialHeight | number | 0 | Default height for initial render before measurement | | onResize | (size: Size) => void | undefined | Callback fired when container size changes | | class | string | undefined | CSS class for the container element | | style | JSX.CSSProperties | undefined | Inline styles for the container (width/height are reserved) |

Types

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;
};

🎮 Interactive Playground

Explore AutoSizer's capabilities with our comprehensive playground app! The playground includes:

• Basic Examples - Simple responsive content, resize callbacks, custom dimensions, flexbox integration
• Charts & Visualizations - Responsive bar charts, line charts, pie charts, and dashboards
• Virtual Lists & Grids - Performance demos with 1K-100K items, searchable lists, variable heights
• Real-time Demos - Interactive examples you can resize and modify

Running the Playground

# 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

The playground will be available at http://localhost:3000 and showcases real-world use cases including:

• 📊 Chart Integration - See how AutoSizer works with data visualizations
• 📋 Virtual Scrolling - Performance testing with large datasets
• 🎨 Styling Examples - Custom themes and responsive designs
• ⚡ Performance Monitoring - Real-time resize event tracking

💡 Common Use Cases

Charts and Visualizations

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>;

Virtualized Lists

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>;

Responsive Grids

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>;

🌐 Browser Support

AutoSizer uses the ResizeObserver API, which is supported in:

• Chrome 64+
• Firefox 69+
• Safari 13.1+
• Edge 79+

For older browsers, you can use a ResizeObserver polyfill.

📄 License

MIT License - see LICENSE file for details.

🙏 Acknowledgments

• Inspired by React Virtualized Auto Sizer
• Built with SolidJS