Svelte Infinite Scroll
•
Infinite Scroll Component to Svelte.
Installation
npm i svelte-infinite-scroll
// or
yarn add svelte-infinite-scrollNote: to use this library in Sapper applications, install as devDependency. Take a look at this link.
Demo link
Local demo:
git clone https://github.com/andrelmlins/svelte-infinite-scroll.git
cd svelte-infinite-scroll
npm install && npm run devExamples
An example of how to use the library:
<script>
import InfiniteScroll from "svelte-infinite-scroll";
import allCountries from "./countries.js";
let page = 0;
let size = 20;
let countries = [];
$: countries = [
...countries,
...allCountries.splice(size * page, size * (page + 1) - 1)
];
</script>
<style>
ul {
width: 400px;
max-height: 400px;
overflow-x: scroll;
}
</style>
<ul>
{#each countries as country}
<li>{country.name}</li>
{/each}
<InfiniteScroll threshold={100} on:loadMore={() => page++} />
</ul>Another examples
Properties
Component props:
| Prop | Type | Default | Description |
|---|---|---|---|
threshold |
number | 0 | Threshold to call loadMore |
elementScroll |
node | - | Element to bind scroll |
window |
bool | false | Bind scroll in window |
hasMore |
bool | true | Tells you if there are more items to load |
horizontal |
bool | false | Changing orientation |
reverse |
bool | false | Revese scroll direction |
Events
| Event | Description |
|---|---|
loadMore |
Tells you if there are more items to load |
NPM statistics
Download stats for this NPM package.
License
Svelte Infinite Scroll is open source software licensed as MIT.