svelte-virtualized-auto-sizer

Port from react-virtualized-auto-sizer - High-order component that automatically adjusts the width and height of a single child.

Usage no npm install needed!

<script type="module">
  import svelteVirtualizedAutoSizer from 'https://cdn.skypack.dev/svelte-virtualized-auto-sizer';
</script>

README

svelte-virtualized-auto-sizer

Svelte port of the AutoSizer component from react-virtualized.

High-order component that automatically adjusts the width and height of a single child. Read more about this component in my blog

NPM

Install

npm install --save-dev svelte-virtualized-auto-sizer

Documentation

Please see API documentation of "AutoSizer" in react-virtualized package here.

On the props style and children are removed, since these are React-specific.

Instead, use slot props:


<AutoSizer let:width={childWidth} let:height={childHeight}>
    <div 
    style={"width:"+childWidth+"px;height:"+childHeight+"px;"}
    >Test</div>
</AutoSizer>