Skip to content

Lazy Load List is a lightweight web package that loads items in lazy way..

Notifications You must be signed in to change notification settings

omer73364/lazy-load-list

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

31 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Lazy Load List

# Stand With Palestine 🇵🇸

Lazy Load List is a lightweight web package that loads items in lazy way to achieve high performance and better UX in large lists.

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:

loading performance deference

Features

  • Fast Loading 🚀
  • Lightweight package
  • Better user experience
  • Supports most loved JS frameworks
  • Supports SSR & SSG

Demo

you can find the source code of examples in examples folder

Lazy Load List 1.2 is here 🎉

what's new?

  • support React js
  • auto loading items when container can contain more
  • better performance
  • explain using custom loading element

Supported Frameworks

| svelte logo | Svete js     | ✅
| vue logo | Vue js (2,3) | ✅
| react logo | React js     | ✅

Installation

install the package using npm or yarn:

install using npm

$ npm i lazy-load-list

or using yarn

$ yarn add lazy-load-list

Usage

⚠ you must wrap the list by div and specify the height and width in the wrapper div.

  • svelte logo svelte js:
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>
  • vue logo vue js:
<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
  • react logo react js:
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>

Props

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

Using custom loading element

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:

  • in svelte logo svelte js & vue logo vue js (just use slot name "loading like this):
<img slot="loading" src="loading.svg" width="16" alt="loading"/>
  • react logo react js (use loadingComponent props to pass the element):
	..
		loadingComponent={loadingElementHere}
	/>