Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[Fork] Svelte 5 Support #58

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[Fork] Svelte 5 Support #58

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
69 changes: 35 additions & 34 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,9 +73,11 @@ From CDN (via [unpkg](https://unpkg.com/)):
</script>

<VirtualList width="100%" height={600} itemCount={data.length} itemSize={50}>
<div slot="item" let:index let:style {style}>
Letter: {data[index]}, Row: #{index}
</div>
{#snippet children({ style, index })}
<div {style}>
Letter: {data[index]}, Row: #{index}
</div>
{/snippet}
</VirtualList>
```

Expand All @@ -86,7 +88,7 @@ Also works pretty well with [`svelte-infinite-loading`](https://github.com/Skayo
import VirtualList from 'svelte-tiny-virtual-list';
import InfiniteLoading from 'svelte-infinite-loading';

let data = ['A', 'B', 'C', 'D', 'E', 'F' /* ... */];
let data = $state(['A', 'B', 'C', 'D', 'E', 'F' /* ... */]);

function infiniteHandler({ detail: { complete, error } }) {
try {
Expand All @@ -103,13 +105,17 @@ Also works pretty well with [`svelte-infinite-loading`](https://github.com/Skayo
</script>

<VirtualList width="100%" height={600} itemCount={data.length} itemSize={50}>
<div slot="item" let:index let:style {style}>
Letter: {data[index]}, Row: #{index}
</div>
{#snippet children({ style, index })}
<div {style}>
Letter: {data[index]}, Row: #{index}
</div>
{/snippet}

<div slot="footer">
<InfiniteLoading on:infinite={infiniteHandler} />
</div>
{#snippet footer()}
<div>
<InfiniteLoading on:infinite={infiniteHandler} />
</div>
{/snippet}
</VirtualList>
```

Expand All @@ -129,29 +135,20 @@ Also works pretty well with [`svelte-infinite-loading`](https://github.com/Skayo
| stickyIndices | `number[]` | | An array of indexes (eg. `[0, 10, 25, 30]`) to make certain items in the list sticky (`position: sticky`) |
| overscanCount | `number` | | Number of extra buffer items to render above/below the visible items. Tweaking this can help reduce scroll flickering on certain browsers/devices. |
| estimatedItemSize | `number` | | Used to estimate the total size of the list before all of its items have actually been measured. The estimated total height is progressively adjusted as items are rendered. |
| getKey | `(index: number) => any` | | Function that returns the key of an item in the list, which is used to uniquely identify an item. This is useful for dynamic data coming from a database or similar. By default, it's using the item's index. |
| getKey | `(index: number) => any` | | Function that returns the key of an item in the list, which is used to uniquely identify an item. This is useful for dynamic data coming from a database or similar. By default, it's using the item's index.
| onAfterScroll | `({ event: ScrollEvent, offset: number }) => any` | | Function that fires after handling the scroll event. Props: `event: ScrollEvent` - The original scroll event, `offset: number` - Either the value of `wrapper.scrollTop` or `wrapper.scrollLeft`
| onListItemsUpdate | `({ start: number, end: number }) => any` | | Function that fires when the visible items are updated. Props: `start: number` - Index of the first visible item, `end: number` - Index of the last visible item. |

_\* `height` must be a number when `scrollDirection` is `'vertical'`. Similarly, `width` must be a number if `scrollDirection` is `'horizontal'`_

### Slots
### Snippets

- `item` - Slot for each item
- Props:
- `children` - Snippet for each item
- Prop: `{ index, style }`
- `index: number` - Item index
- `style: string` - Item style, must be applied to the slot (look above for example)
- `header` - Slot for the elements that should appear at the top of the list
- `footer` - Slot for the elements that should appear at the bottom of the list (e.g. `InfiniteLoading` component from `svelte-infinite-loading`)

### Events

- `afterScroll` - Fired after handling the scroll event
- `detail` Props:
- `event: ScrollEvent` - The original scroll event
- `offset: number` - Either the value of `wrapper.scrollTop` or `wrapper.scrollLeft`
- `itemsUpdated` - Fired when the visible items are updated
- `detail` Props:
- `start: number` - Index of the first visible item
- `end: number` - Index of the last visible item
- `style: string` - Item style, must be applied to the snippet (look above for example)
- `header` - Snippet for the elements that should appear at the top of the list
- `footer` - Snippet for the elements that should appear at the bottom of the list (e.g. `InfiniteLoading` component from `svelte-infinite-loading`)

### Methods

Expand Down Expand Up @@ -185,9 +182,11 @@ However, if you're passing a function to `itemSize`, that type of comparison is
itemCount={data.length}
itemSize={50}
>
<div slot="item" let:index let:style {style}>
Letter: {data[index]}, Row: #{index}
</div>
{#snippet children({ style, index })}
<div {style}>
Letter: {data[index]}, Row: #{index}
</div>
{/snippet}
</VirtualList>
```

Expand All @@ -204,9 +203,11 @@ You can style the elements of the virtual list like this:

<div class="list">
<VirtualList width="100%" height={600} itemCount={data.length} itemSize={50}>
<div slot="item" let:index let:style {style}>
Letter: {data[index]}, Row: #{index}
</div>
{#snippet children({ style, index })}
<div {style}>
Letter: {data[index]}, Row: #{index}
</div>
{/snippet}
</VirtualList>
</div>

Expand Down
Loading