{"_id":"@dschz/solid-auto-sizer","_rev":"4-2141345fd68677e1f5afa095a574447c","name":"@dschz/solid-auto-sizer","dist-tags":{"latest":"0.1.3"},"versions":{"0.1.0":{"name":"@dschz/solid-auto-sizer","version":"0.1.0","author":{"name":"Daniel Sanchez","email":"dsanc89@icloud.com"},"license":"MIT","_id":"@dschz/solid-auto-sizer@0.1.0","maintainers":[{"name":"dsanc89","email":"dsanc89@icloud.com"}],"homepage":"https://github.com/dsnchz/solid-auto-sizer#readme","bugs":{"url":"https://github.com/dsnchz/solid-auto-sizer/issues"},"dist":{"shasum":"aaf8b9f5566b108f349e67943253dc3befc60d7a","tarball":"https://registry.npmjs.org/@dschz/solid-auto-sizer/-/solid-auto-sizer-0.1.0.tgz","fileCount":6,"integrity":"sha512-JAnwg9s/qtwWvlZ+ScVBnMpaGO8cvJQPPGXp8ddopaS1KpM/+T4Zfwl0/cSy+GUwE0w43py3f6WOlJ05BjkTIg==","signatures":[{"sig":"MEUCIQDZvM197k0WfTcVav0MbQORQcCoeBBTx+6XSxlBuHH+iQIgWcXXreWDIhita0M8gMLMUHYfdXMWfdIPa0OEGvNhO94=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":14746},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","browser":{},"exports":{"solid":"./dist/index.jsx","import":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"gitHead":"d556f7dbf644b39565513011814795380cdfc340","scripts":{"dev":"vite","lint":"eslint .","test":"vitest run","build":"tsup","serve":"vite preview","start":"vite","format":"prettier . --check","lint:fix":"eslint . --fix","test:cov":"vitest run --coverage","typecheck":"tsc --noEmit","format:fix":"prettier . --write","build:watch":"tsup --watch","pkg:publish":"bun run build && changeset publish","pkg:version":"changeset version","start:server":"bun run server/index.ts","pkg:changeset":"changeset"},"_npmUser":{"name":"dsanc89","email":"dsanc89@icloud.com"},"repository":{"url":"git+https://github.com/dsnchz/solid-auto-sizer.git","type":"git"},"_npmVersion":"10.9.0","description":"SolidJS component that automatically measures and provides the width and height of its parent — useful for virtualized lists, grids, and charts.","directories":{},"_nodeVersion":"22.11.0","publishConfig":{"access":"public"},"typesVersions":{},"_hasShrinkwrap":false,"devDependencies":{"jiti":"^2.4.2","tsup":"^8.4.0","vite":"^6.3.5","jsdom":"^26.1.0","eslint":"^9.26.0","vitest":"^3.1.3","globals":"^16.1.0","prettier":"^3.5.3","solid-js":"^1.9.6","@types/bun":"^1.2.12","typescript":"^5.8.3","tailwindcss":"^4.1.5","@changesets/cli":"^2.29.3","@solidjs/router":"^0.15.3","@tailwindcss/vite":"^4.1.5","tsup-preset-solid":"^2.2.0","typescript-eslint":"^8.32.0","vite-plugin-solid":"^2.11.6","eslint-plugin-solid":"^0.14.5","@solidjs/testing-library":"^0.8.10","@testing-library/jest-dom":"^6.6.3","@typescript-eslint/parser":"^8.32.0","@vitest/coverage-istanbul":"^3.1.3","@typescript-eslint/eslint-plugin":"^8.32.0","eslint-plugin-simple-import-sort":"^12.1.1"},"peerDependencies":{"solid-js":">=1.6.0"},"_npmOperationalInternal":{"tmp":"tmp/solid-auto-sizer_0.1.0_1748331077240_0.1992014379835445","host":"s3://npm-registry-packages-npm-production"}},"0.1.1":{"name":"@dschz/solid-auto-sizer","version":"0.1.1","keywords":["auto-sizer","autosizer","component","container","dimensions","height","layout","measure","observer","reactive","render-prop","resize","resize-listener","resize-observer","resizer","responsive","solid","solid-component","solid-js","solidjs","solidjs-component","solidjs-resize","solidjs-utils","utility","virtual-scroll","virtualization","width"],"author":{"name":"Daniel Sanchez","email":"dsanc89@icloud.com"},"license":"MIT","_id":"@dschz/solid-auto-sizer@0.1.1","maintainers":[{"name":"dsanc89","email":"dsanc89@icloud.com"}],"homepage":"https://github.com/dsnchz/solid-auto-sizer#readme","bugs":{"url":"https://github.com/dsnchz/solid-auto-sizer/issues"},"dist":{"shasum":"409714dcc45f44eed257f5671978a691b4ac0c75","tarball":"https://registry.npmjs.org/@dschz/solid-auto-sizer/-/solid-auto-sizer-0.1.1.tgz","fileCount":6,"integrity":"sha512-ApSOnZYu4MXs8Phtyg8kn31xsAPzXRbScLhjRE9/jvm/9iMvzucXbA9XNxFFK+AjAaMN6vm9y7iZm8G4n+CY6w==","signatures":[{"sig":"MEYCIQDGQz0CmbgrlW9Tw9m4g4zbGa8Aj39YNWzyS7Ij8uWEogIhANPee0Nlxoq1NPVoO3OYMYCkpsgltSCx73O8Je/3im2v","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":15677},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","browser":{},"exports":{"solid":"./dist/index.jsx","import":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"gitHead":"cef15cb459f49025f3f5d320e2d994eacaf6c1aa","scripts":{"dev":"vite","lint":"eslint .","test":"vitest run","build":"tsup","serve":"vite preview","start":"vite","format":"prettier . --check","lint:fix":"eslint . --fix","test:cov":"vitest run --coverage","typecheck":"tsc --noEmit","format:fix":"prettier . --write","build:watch":"tsup --watch","pkg:publish":"bun run build && changeset publish","pkg:version":"changeset version","start:server":"bun run server/index.ts","pkg:changeset":"changeset"},"_npmUser":{"name":"dsanc89","email":"dsanc89@icloud.com"},"repository":{"url":"git+https://github.com/dsnchz/solid-auto-sizer.git","type":"git"},"_npmVersion":"10.9.0","description":"SolidJS component that automatically measures and provides the width and height of its parent — useful for virtualized lists, grids, and charts.","directories":{},"_nodeVersion":"22.11.0","publishConfig":{"access":"public"},"typesVersions":{},"_hasShrinkwrap":false,"devDependencies":{"jiti":"^2.4.2","tsup":"^8.4.0","vite":"^6.3.5","jsdom":"^26.1.0","eslint":"^9.26.0","vitest":"^3.1.3","globals":"^16.1.0","prettier":"^3.5.3","solid-js":"^1.9.6","@types/bun":"^1.2.12","typescript":"^5.8.3","tailwindcss":"^4.1.5","@changesets/cli":"^2.29.3","@solidjs/router":"^0.15.3","@tailwindcss/vite":"^4.1.5","tsup-preset-solid":"^2.2.0","typescript-eslint":"^8.32.0","vite-plugin-solid":"^2.11.6","eslint-plugin-solid":"^0.14.5","@solidjs/testing-library":"^0.8.10","@testing-library/jest-dom":"^6.6.3","@typescript-eslint/parser":"^8.32.0","@vitest/coverage-istanbul":"^3.1.3","@typescript-eslint/eslint-plugin":"^8.32.0","eslint-plugin-simple-import-sort":"^12.1.1"},"peerDependencies":{"solid-js":">=1.6.0"},"_npmOperationalInternal":{"tmp":"tmp/solid-auto-sizer_0.1.1_1748378172757_0.30181268117060966","host":"s3://npm-registry-packages-npm-production"}},"0.1.2":{"name":"@dschz/solid-auto-sizer","version":"0.1.2","keywords":["auto-sizer","autosizer","component","container","dimensions","height","layout","measure","observer","reactive","render-prop","resize","resize-listener","resize-observer","resizer","responsive","solid","solid-component","solid-js","solidjs","solidjs-component","solidjs-resize","solidjs-utils","utility","virtual-scroll","virtualization","width"],"author":{"name":"Daniel Sanchez","email":"dsanc89@icloud.com"},"license":"MIT","_id":"@dschz/solid-auto-sizer@0.1.2","maintainers":[{"name":"dsanc89","email":"dsanc89@icloud.com"}],"homepage":"https://github.com/dsnchz/solid-auto-sizer#readme","bugs":{"url":"https://github.com/dsnchz/solid-auto-sizer/issues"},"dist":{"shasum":"a0a6d95ae39bf70040fc52a69044bb61ac4a7a20","tarball":"https://registry.npmjs.org/@dschz/solid-auto-sizer/-/solid-auto-sizer-0.1.2.tgz","fileCount":6,"integrity":"sha512-9XUFAJNMXIab57uWAZ0qDitMmI2ejsaTXUlVS9KzEXbiLL8nLrlupkSCusnUFX8KZy78ba3MxgShS5DQLi6dEQ==","signatures":[{"sig":"MEYCIQCH8XuLReWg2uGnK4HhyJtyt4I7DEWk/kpbD8VfwEySfQIhAIULA0Fwb/ICZ16JxhgyH3GJp6q4LPU2GhatxsCl5omG","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":16611},"main":"./dist/index.js","type":"module","types":"./dist/index.d.ts","module":"./dist/index.js","browser":{},"exports":{"solid":"./dist/index.jsx","import":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"gitHead":"1f59feeda5c25bf466e14089aa1398dff9ab7d52","scripts":{"dev":"vite","lint":"eslint .","test":"vitest run","build":"tsup","serve":"vite preview","start":"vite","format":"prettier . --check","lint:fix":"eslint . --fix","test:cov":"vitest run --coverage","typecheck":"tsc --noEmit","format:fix":"prettier . --write","build:watch":"tsup --watch","pkg:publish":"bun run build && changeset publish","pkg:version":"changeset version","start:server":"bun run server/index.ts","pkg:changeset":"changeset"},"_npmUser":{"name":"dsanc89","email":"dsanc89@icloud.com"},"repository":{"url":"git+https://github.com/dsnchz/solid-auto-sizer.git","type":"git"},"_npmVersion":"10.9.0","description":"SolidJS component that automatically measures and provides the width and height of its parent — useful for virtualized lists, grids, and charts.","directories":{},"_nodeVersion":"22.11.0","publishConfig":{"access":"public"},"typesVersions":{},"_hasShrinkwrap":false,"devDependencies":{"jiti":"^2.4.2","tsup":"^8.4.0","vite":"^6.3.5","jsdom":"^26.1.0","eslint":"^9.26.0","vitest":"^3.1.3","globals":"^16.1.0","prettier":"^3.5.3","solid-js":"^1.9.6","@types/bun":"^1.2.12","typescript":"^5.8.3","tailwindcss":"^4.1.5","@changesets/cli":"^2.29.3","@solidjs/router":"^0.15.3","@tailwindcss/vite":"^4.1.5","tsup-preset-solid":"^2.2.0","typescript-eslint":"^8.32.0","vite-plugin-solid":"^2.11.6","eslint-plugin-solid":"^0.14.5","@solidjs/testing-library":"^0.8.10","@testing-library/jest-dom":"^6.6.3","@typescript-eslint/parser":"^8.32.0","@vitest/coverage-istanbul":"^3.1.3","@typescript-eslint/eslint-plugin":"^8.32.0","eslint-plugin-simple-import-sort":"^12.1.1"},"peerDependencies":{"solid-js":">=1.6.0"},"_npmOperationalInternal":{"tmp":"tmp/solid-auto-sizer_0.1.2_1748398260083_0.24613713286803685","host":"s3://npm-registry-packages-npm-production"}},"0.1.3":{"name":"@dschz/solid-auto-sizer","version":"0.1.3","description":"SolidJS component that automatically measures and provides the width and height of its parent — useful for virtualized lists, grids, and charts.","type":"module","author":{"name":"Daniel Sanchez","email":"dsanc89@icloud.com"},"license":"MIT","homepage":"https://github.com/dsnchz/solid-auto-sizer#readme","repository":{"type":"git","url":"git+https://github.com/dsnchz/solid-auto-sizer.git"},"bugs":{"url":"https://github.com/dsnchz/solid-auto-sizer/issues"},"publishConfig":{"access":"public"},"keywords":["auto-sizer","autosizer","component","container","dimensions","height","layout","measure","observer","reactive","render-prop","resize","resize-listener","resize-observer","resizer","responsive","solid","solid-component","solid-js","solidjs","solidjs-component","solidjs-resize","solidjs-utils","utility","virtual-scroll","virtualization","width"],"main":"./dist/index.js","module":"./dist/index.js","types":"./dist/index.d.ts","browser":{},"exports":{"solid":"./dist/index.jsx","import":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"typesVersions":{},"scripts":{"build":"tsup","build:watch":"tsup --watch","dev":"vite","format":"prettier . --check","format:fix":"prettier . --write","lint":"eslint .","lint:fix":"eslint . --fix","pkg:changeset":"changeset","pkg:version":"changeset version","pkg:publish":"bun run build && changeset publish","serve":"vite preview","start":"vite","start:server":"bun run server/index.ts","test":"vitest run","test:cov":"vitest run --coverage","typecheck":"tsc --noEmit"},"devDependencies":{"@changesets/cli":"^2.29.3","@solidjs/router":"^0.15.3","@solidjs/testing-library":"^0.8.10","@tailwindcss/vite":"^4.1.5","@testing-library/jest-dom":"^6.6.3","@types/bun":"^1.2.12","@typescript-eslint/eslint-plugin":"^8.32.0","@typescript-eslint/parser":"^8.32.0","@vitest/coverage-istanbul":"^3.1.3","eslint":"^9.26.0","eslint-plugin-simple-import-sort":"^12.1.1","eslint-plugin-solid":"^0.14.5","globals":"^16.1.0","jiti":"^2.4.2","jsdom":"^26.1.0","prettier":"^3.5.3","solid-js":"^1.9.6","tailwindcss":"^4.1.5","tsup":"^8.4.0","tsup-preset-solid":"^2.2.0","typescript":"^5.8.3","typescript-eslint":"^8.32.0","vite":"^6.3.5","vite-plugin-solid":"^2.11.6","vitest":"^3.1.3"},"peerDependencies":{"solid-js":">=1.6.0"},"_id":"@dschz/solid-auto-sizer@0.1.3","gitHead":"486002bf1598755688523dfffe8da31a821a0fff","_nodeVersion":"22.11.0","_npmVersion":"10.9.0","dist":{"integrity":"sha512-KvgvrZRiqe0qU1e1K91MqMVuzr1McptHX+LEkmaek8bwETSNXvLbPDgQQSkvPtVq26/pv4pdIIDJ/JpHVMS0ag==","shasum":"b1bf7f0fa546d2ad71e66f776b4926d715636f7f","tarball":"https://registry.npmjs.org/@dschz/solid-auto-sizer/-/solid-auto-sizer-0.1.3.tgz","fileCount":6,"unpackedSize":16725,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEUCICyzO1Okj4VY3s0ntUl+9lO9cciy9iSpAL0P2SzYGtDMAiEA89s5fijY1uhFDqhdhol5Xmp7D7r9bdWYk5lUBy2PjaQ="}]},"_npmUser":{"name":"dsanc89","email":"dsanc89@icloud.com"},"directories":{},"maintainers":[{"name":"dsanc89","email":"dsanc89@icloud.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/solid-auto-sizer_0.1.3_1749141569681_0.46651171317798146"},"_hasShrinkwrap":false}},"time":{"created":"2025-05-27T07:31:17.122Z","modified":"2025-06-05T16:39:30.092Z","0.1.0":"2025-05-27T07:31:17.414Z","0.1.1":"2025-05-27T20:36:12.936Z","0.1.2":"2025-05-28T02:11:00.258Z","0.1.3":"2025-06-05T16:39:29.880Z"},"bugs":{"url":"https://github.com/dsnchz/solid-auto-sizer/issues"},"author":{"name":"Daniel Sanchez","email":"dsanc89@icloud.com"},"license":"MIT","homepage":"https://github.com/dsnchz/solid-auto-sizer#readme","keywords":["auto-sizer","autosizer","component","container","dimensions","height","layout","measure","observer","reactive","render-prop","resize","resize-listener","resize-observer","resizer","responsive","solid","solid-component","solid-js","solidjs","solidjs-component","solidjs-resize","solidjs-utils","utility","virtual-scroll","virtualization","width"],"repository":{"type":"git","url":"git+https://github.com/dsnchz/solid-auto-sizer.git"},"description":"SolidJS component that automatically measures and provides the width and height of its parent — useful for virtualized lists, grids, and charts.","maintainers":[{"name":"dsanc89","email":"dsanc89@icloud.com"}],"readme":"<p>\n  <img width=\"100%\" src=\"https://assets.solidjs.com/banner?type=Ecosystem&background=tiles&project=solid-auto-sizer\" alt=\"SolidJS AutoSizer\">\n</p>\n\n# @dschz/solid-auto-sizer\n\n[![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](https://opensource.org/licenses/MIT)\n[![npm version](https://img.shields.io/npm/v/@dschz/solid-auto-sizer?color=blue)](https://www.npmjs.com/package/@dschz/solid-auto-sizer)\n[![Bundle Size](https://img.shields.io/bundlephobia/minzip/@dschz/solid-auto-sizer)](https://bundlephobia.com/package/@dschz/solid-auto-sizer)\n[![JSR](https://jsr.io/badges/@dschz/solid-auto-sizer/score)](https://jsr.io/@dschz/solid-auto-sizer)\n[![CI](https://github.com/dsnchz/solid-auto-sizer/actions/workflows/ci.yaml/badge.svg)](https://github.com/dsnchz/solid-auto-sizer/actions/workflows/ci.yaml)\n\n> 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.\n\n**Inspired by [React Virtualized Auto Sizer](https://github.com/bvaughn/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.\n\n## ✨ Features\n\n- 🔍 **Modern ResizeObserver API** - Better performance and reliability\n- ⚡ **Reactive updates** - Uses SolidJS signals for efficient re-rendering\n- 🎛️ **Customizable initial dimensions** - Set default width/height for initial render\n- 📞 **Optional resize callbacks** - Get notified when size changes\n- 🎨 **Style and class prop support** - Full styling flexibility\n- 📦 **Lightweight** - Minimal bundle size with zero dependencies\n\n## 📦 Installation\n\nInstall via your favorite package manager:\n\n```bash\nnpm install solid-js @dschz/solid-auto-sizer\npnpm install solid-js @dschz/solid-auto-sizer\nyarn install solid-js @dschz/solid-auto-sizer\nbun install solid-js @dschz/solid-auto-sizer\n```\n\n> This is a **peer dependency**, so it must be installed manually:\n>\n> - `solid-js@>=1.6.0`\n\n## 🚀 Quick Start\n\n```tsx\nimport { AutoSizer } from \"@dschz/solid-auto-sizer\";\n\nfunction MyComponent() {\n  return (\n    <div style={{ width: \"100%\", height: \"400px\" }}>\n      <AutoSizer>\n        {({ width, height }) => (\n          <div style={{ width: `${width}px`, height: `${height}px` }}>\n            Content that adapts to container size: {width} × {height}\n          </div>\n        )}\n      </AutoSizer>\n    </div>\n  );\n}\n```\n\n## 📖 Usage Examples\n\n### Basic Usage\n\n```tsx\nimport { AutoSizer } from \"@dschz/solid-auto-sizer\";\n\n<AutoSizer>{({ width, height }) => <canvas width={width} height={height} />}</AutoSizer>;\n```\n\n### With Initial Dimensions\n\n```tsx\n<AutoSizer initialWidth={400} initialHeight={300}>\n  {({ width, height }) => <MyChart width={width} height={height} data={data} />}\n</AutoSizer>\n```\n\n### With Resize Callback\n\n```tsx\n<AutoSizer\n  onResize={({ width, height }) => {\n    console.log(`Container resized to: ${width}x${height}`);\n  }}\n>\n  {({ width, height }) => <VirtualizedList width={width} height={height} items={items} />}\n</AutoSizer>\n```\n\n### With Custom Styling\n\n```tsx\n<AutoSizer\n  class=\"my-auto-sizer\"\n  style={{\n    \"background-color\": \"#f0f0f0\",\n    border: \"1px solid #ccc\",\n    padding: \"10px\",\n  }}\n>\n  {({ width, height }) => (\n    <div>\n      Styled container: {width} × {height}\n    </div>\n  )}\n</AutoSizer>\n```\n\n## 📚 API Reference\n\n### Props\n\n| Prop            | Type                          | Default      | Description                                                 |\n| --------------- | ----------------------------- | ------------ | ----------------------------------------------------------- |\n| `children`      | `(size: Size) => JSX.Element` | **Required** | Render prop that receives the measured dimensions           |\n| `initialWidth`  | `number`                      | `0`          | Default width for initial render before measurement         |\n| `initialHeight` | `number`                      | `0`          | Default height for initial render before measurement        |\n| `onResize`      | `(size: Size) => void`        | `undefined`  | Callback fired when container size changes                  |\n| `class`         | `string`                      | `undefined`  | CSS class for the container element                         |\n| `style`         | `JSX.CSSProperties`           | `undefined`  | Inline styles for the container (width/height are reserved) |\n\n### Types\n\n```tsx\ntype Size = {\n  readonly width: number;\n  readonly height: number;\n};\n\ntype AutoSizerProps = {\n  readonly class?: string;\n  readonly style?: Omit<JSX.CSSProperties, \"width\" | \"height\">;\n  readonly initialWidth?: number;\n  readonly initialHeight?: number;\n  readonly onResize?: (size: Size) => void;\n  readonly children: (size: Size) => JSX.Element;\n};\n```\n\n## 🎮 Interactive Playground\n\nExplore AutoSizer's capabilities with our comprehensive playground app! The playground includes:\n\n- **Basic Examples** - Simple responsive content, resize callbacks, custom dimensions, flexbox integration\n- **Charts & Visualizations** - Responsive bar charts, line charts, pie charts, and dashboards\n- **Virtual Lists & Grids** - Performance demos with 1K-100K items, searchable lists, variable heights\n- **Real-time Demos** - Interactive examples you can resize and modify\n\n### Running the Playground\n\n```bash\n# Clone the repository\ngit clone https://github.com/dsnchz/solid-auto-sizer.git\ncd solid-auto-sizer\n\n# Install dependencies\nnpm|pnpm|yarn|bun install\n\n# Start the development server\nnpm|pnpm|yarn|bun start\n```\n\nThe playground will be available at `http://localhost:3000` and showcases real-world use cases including:\n\n- 📊 **Chart Integration** - See how AutoSizer works with data visualizations\n- 📋 **Virtual Scrolling** - Performance testing with large datasets\n- 🎨 **Styling Examples** - Custom themes and responsive designs\n- ⚡ **Performance Monitoring** - Real-time resize event tracking\n\n## 💡 Common Use Cases\n\n### Charts and Visualizations\n\n```tsx\nimport { AutoSizer } from \"@dschz/solid-auto-sizer\";\nimport { LineChart } from \"my-chart-library\";\n\n<div style={{ width: \"100%\", height: \"400px\" }}>\n  <AutoSizer>\n    {({ width, height }) => <LineChart width={width} height={height} data={chartData} />}\n  </AutoSizer>\n</div>;\n```\n\n### Virtualized Lists\n\n```tsx\nimport { AutoSizer } from \"@dschz/solid-auto-sizer\";\nimport { VirtualList } from \"my-virtualization-library\";\n\n<div style={{ width: \"100%\", height: \"600px\" }}>\n  <AutoSizer>\n    {({ width, height }) => (\n      <VirtualList\n        width={width}\n        height={height}\n        itemCount={items.length}\n        itemSize={50}\n        renderItem={({ index }) => <div>{items[index].name}</div>}\n      />\n    )}\n  </AutoSizer>\n</div>;\n```\n\n### Responsive Grids\n\n```tsx\nimport { AutoSizer } from \"@dschz/solid-auto-sizer\";\n\n<AutoSizer>\n  {({ width }) => {\n    const columns = Math.floor(width / 200); // 200px per column\n    return (\n      <div\n        style={{\n          display: \"grid\",\n          \"grid-template-columns\": `repeat(${columns}, 1fr)`,\n          gap: \"16px\",\n        }}\n      >\n        {items.map((item) => (\n          <GridItem key={item.id} {...item} />\n        ))}\n      </div>\n    );\n  }}\n</AutoSizer>;\n```\n\n## 🌐 Browser Support\n\nAutoSizer uses the [ResizeObserver API](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver), which is supported in:\n\n- Chrome 64+\n- Firefox 69+\n- Safari 13.1+\n- Edge 79+\n\nFor older browsers, you can use a [ResizeObserver polyfill](https://github.com/que-etc/resize-observer-polyfill).\n\n## 📄 License\n\nMIT License - see [LICENSE](LICENSE) file for details.\n\n## 🙏 Acknowledgments\n\n- Inspired by [React Virtualized Auto Sizer](https://github.com/bvaughn/react-virtualized-auto-sizer)\n- Built with [SolidJS](https://www.solidjs.com/)\n","readmeFilename":"README.md"}