Rendering large lists makes the first load slow especially if items contain images, so this package split the list to small lists then it renders them one by one when scrolling to the end of the list..
you can notice the deference here:
you can find the source code of examples in examples folder
| | Svete js | ✅ | | Vue js (2,3) | ✅ | | React js | ✅
install the package using npm or yarn:
install using npm
$ npm i lazy-load-list
or using yarn
$ yarn add lazy-load-list
âš you must wrap the list by div and specify the height and width in the wrapper div.
import LazyList from 'lazy-load-list/svelte'
<div class="container">
<LazyList
data={colors}
itemsPerRender={15}
containerClasses="list"
defaultLoadingColor="#222"
let:item={item}
>
<h1>{ item }</h1>
</LazyList>
</div>
<div class="container">
<LazyList
:data="items"
:itemsPerRender="15"
containerClasses="list"
defaultLoadingColor="#222"
>
<template v-slot="{item}">
<h1>{{ item }}</h1>
</template>
</LazyList>
</div>
// script
import LazyList from 'lazy-load-list/vue'
..
components: { LazyList } // don't forget to define it in the components
import LazyList from 'lazy-load-list/react'
const renderItem = ({item, index}) => (
<h1 key={index}>{ item }</h1>
)
<div className="container">
<LazyList
data={colors}
itemsPerRender={15}
containerClasses="list"
defaultLoadingColor="#222"
renderItem={renderItem}
/>
</div>
prop | supported framework | description | required | type | default value |
data | all | the item array | yes | array | [] |
itemsPerRender | all | items to be rendered per load | yes | number | 3 |
containerClasses | all | list container classes for CSS | no | string | '' |
defaultLoading | all | to show the default loading or not | no | bool | true |
defaultLoadingColor | all | color of the default loading | no | string | '#18191A' |
renderItem | React js | element to be render for each item | yes | React component | () => null |
loadingComponent | React js | custom loading component | no | React component | () => null |
you can specify the loading element color using (defaultLoadingColor) prop.. but if you don't like the default loading element, you can use custom one:
<img slot="loading" src="loading.svg" width="16" alt="loading"/>
..
loadingComponent={loadingElementHere}
/>