Svelte Infinite Scroll

• • • • •

Infinite Scroll Component to Svelte.

Installation

npm i svelte-infinite-scroll

// or

yarn add svelte-infinite-scroll

Note: 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 dev

Examples

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

• Infinite scroll with requests | Link | Author
• Infinite scroll reverse | Link | Author

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.