Svelte Infinite Scroll

• • • • •

Infinite Scroll Component to Svelte

Installation

npm i svelte-infinite-scroll
// OR
yarn add svelte-infinite-scroll

Demo Link

Local demo:

git clone https://github.com/andrelmlins/svelte-infinite-scroll.git
cd svelte-infinite-scroll
yarn && yarn start

Examples

<script>
  import SvelteInfiniteScroll 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}
  <SvelteInfiniteScroll threshold={100} on:loadMore={() => page++} />
</ul>

Properties

Component props:

Prop	Type	Description
threshold	number	Threshold to call loadMore
elementScroll	node	Element to bind scroll
hasMore	bool	Tells you if there are more items to load
loadMore	func	Call with offset

Use with sapper

When using Svelte components installed from npm, Svelte needs the original component source. See the link.

Install as devDependency or use the original component as below:

import SvelteInfiniteScroll from "svelte-infinite-scroll/index.svelte";

NPM Statistics

Download stats for this NPM package

License

Svelte Infinite Scroll is open source software licensed as MIT.