svelte-infinite-scroll

Infinite Scroll Component to Svelte

Usage no npm install needed!

<script type="module">
  import svelteInfiniteScroll from 'https://cdn.skypack.dev/svelte-infinite-scroll';
</script>

README

Svelte Infinite Scroll

npm versionLicense: MITBuild StatusNetlify StatusLanguage grade: JavaScriptGitter

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

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.

NPM

License

Svelte Infinite Scroll is open source software licensed as MIT.