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

NPM Statistics

Download stats for this NPM package

License

Svelte Infinite Scroll is open source software licensed as MIT.