https://github.com/maxam2017/svelte-list-view
An infinite list component for Svelte apps, providing an easier way to handle load more scenarios.
https://github.com/maxam2017/svelte-list-view
infinite-scroll sveltejs
Last synced: about 1 year ago
JSON representation
An infinite list component for Svelte apps, providing an easier way to handle load more scenarios.
- Host: GitHub
- URL: https://github.com/maxam2017/svelte-list-view
- Owner: maxam2017
- License: mit
- Created: 2022-06-19T11:57:44.000Z (about 4 years ago)
- Default Branch: main
- Last Pushed: 2022-06-19T13:14:11.000Z (about 4 years ago)
- Last Synced: 2025-06-13T01:38:37.157Z (about 1 year ago)
- Topics: infinite-scroll, sveltejs
- Language: Svelte
- Homepage: https://npm.im/svelte-list-view
- Size: 154 KB
- Stars: 1
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# svelte-list-view ([demo](https://svelte.dev/repl/a2987aac561049639d4b0bb09d8e8c5f))
An infinite list component for Svelte apps, providing an easier way to handle load more scenarios.
## Installation
```
npm i svelte-list-view
```
## Usage
```html
import ListView from 'svelte-list-view';
let items = [];
async function handleLoadMore() {
items = [...items, ...(await fetchItems())];
}
{item}
```
### items & let:item
pass `items` to component's prop and judge how to render item with `let:` directive via slot feature.
### on:loadmore
The custom `loadmore` event fires when the last item get into viewport.
> only fires once until items update
### component
optional, used to render specific outer element tag. `div` by default.
## License
[MIT](https://github.com/maxam2017/svelte-list-view/blob/master/LICENSE)