/svelte-infinite-scroll

Infinite Scroll Component to Svelte

Primary LanguageJavaScriptMIT LicenseMIT

Svelte Infinite Scroll

npm version • License: MIT • Build Status • Dependencies • Netlify Status • Language grade: JavaScript

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/example
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

NPM

License

Svelte Infinite Scroll is open source software licensed as MIT.