@dschz/solid-auto-sizer
v0.1.3TypeScript
SolidJS component that automatically measures and provides the width and height of its parent — useful for virtualized lists, grids, and charts.
0/weekUpdated 8 months agoMITUnpacked: 16.7 KB
Published by Daniel Sanchez
npm install @dschz/solid-auto-sizer
@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:
``bash`
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
`tsx
import { AutoSizer } from "@dschz/solid-auto-sizer";
function MyComponent() {
return (
{({ width, height }) => (
${width}px
, height: ${height}px }}>
Content that adapts to container size: {width} × {height}
)}
);
}
`
📖 Usage Examples
$3
tsx
import { AutoSizer } from "@dschz/solid-auto-sizer";{({ width, height }) => } ;
`$3
tsx
{({ width, height }) =>
`$3
tsx
console.log(Container resized to: ${width}x${height});
}}
>
{({ width, height }) =>
`$3
tsx
style={{
"background-color": "#f0f0f0",
border: "1px solid #ccc",
padding: "10px",
}}
>
{({ width, height }) => (
Styled container: {width} × {height}
)}
`📚 API Reference
$3
| Prop | Type | Default | Description |
| --------------- | ----------------------------- | ------------ | ----------------------------------------------------------- |
|
| (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) |$3
`tsx
type Size = {
readonly width: number;
readonly height: number;
};type AutoSizerProps = {
readonly class?: string;
readonly style?: Omit;
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
$3
bash
Clone the repository
git clone https://github.com/dsnchz/solid-auto-sizer.git
cd solid-auto-sizerInstall dependencies
npm|pnpm|yarn|bun installStart the development server
npm|pnpm|yarn|bun start
`The playground will be available at
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
$3
`tsx
import { AutoSizer } from "@dschz/solid-auto-sizer";
import { LineChart } from "my-chart-library";
{({ width, height }) =>
;
`$3
tsx
import { AutoSizer } from "@dschz/solid-auto-sizer";
import { VirtualList } from "my-virtualization-library";
{({ width, height }) => (
height={height}
itemCount={items.length}
itemSize={50}
renderItem={({ index }) => {items[index].name}}
/>
)}
;
`$3
tsx
import { AutoSizer } from "@dschz/solid-auto-sizer";
{({ width }) => {
const columns = Math.floor(width / 200); // 200px per column
return (
display: "grid",
"grid-template-columns":
repeat(${columns}, 1fr),
gap: "16px",
}}
>
{items.map((item) => (
))}
);
}}
;
``
🌐 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