https://github.com/omer73364/lazy-load-list

Lazy Load List is a lightweight web package that loads items in lazy way..
https://github.com/omer73364/lazy-load-list

javascript js lazy list load packages palestine performance svelte virtual vue web

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/omer73364/lazy-load-list
• Owner: omer73364
• Created: 2022-02-14T11:27:34.000Z (about 3 years ago)
• Default Branch: main
• Last Pushed: 2023-10-21T11:28:25.000Z (over 1 year ago)
• Last Synced: 2025-01-12T11:33:51.057Z (about 1 month ago)
• Topics: javascript, js, lazy, list, load, packages, palestine, performance, svelte, virtual, vue, web
• Language: JavaScript
• Homepage:
• Size: 65.4 KB
• Stars: 33
• Watchers: 2
• Forks: 8
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# 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](https://lh3.googleusercontent.com/pw/AM-JKLXhB1jRKtOi4OhwEfINuYPKGD0LF4XBoQa0XbFoH9jUPQGW0GsOEl-cgnGzIrutEarCEwIDfV23jpI80P-xtIsgmv9oJD2KfImErE66p-5EukjEPCSVefObsHcS7FvZXnjSqC-MpnCpa-Vywq61KvGb=w1280-h720-no?authuser=0)

## Features

 - Fast Loading 🚀

 - Lightweight package

 - Better user experience 

 - Supports most loved JS frameworks

 - Supports SSR & SSG

## Demo

-  [Simple example in Svelte js](https://lazy-load-svelte-example.netlify.com)

-  [Simple example in Vue js](https://lazy-load-vue-example.netlify.com)

-  [Simple example in React js](https://lazy-load-react-example.netlify.com)

you can find the source code of examples in [examples](https://github.com/omer73364/lazy-load-list/tree/main/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


|  | Svete js     | ✅

|  | Vue js (2,3) | ✅

|  | 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 js:

> 

	import LazyList from 'lazy-load-list/svelte'

	


		

			
{ item }

		

	


-  vue js:

> 

	


		

			

			    
{{ item }}

			

		

	


	// script

	import LazyList from 'lazy-load-list/vue'

	..

	components: { LazyList } // don't forget to define it in the components

	

-  react js:

> 

	import  LazyList  from  'lazy-load-list/react'

	

	const renderItem = ({item, index}) => (

		
{ item }

	)

	

	


		

	

	

## 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 js &   vue js (just use slot name "loading like this):

> 

	

-  react js (use loadingComponent props to pass the element):

> 

		..

			loadingComponent={loadingElementHere}

		/>