{"id":24196388,"url":"https://github.com/omer73364/lazy-load-list","last_synced_at":"2025-09-21T21:31:49.161Z","repository":{"id":43834925,"uuid":"459134173","full_name":"omer73364/lazy-load-list","owner":"omer73364","description":"Lazy Load List is a lightweight web package that loads items in lazy way..","archived":false,"fork":false,"pushed_at":"2023-10-21T11:28:25.000Z","size":67,"stargazers_count":33,"open_issues_count":0,"forks_count":8,"subscribers_count":2,"default_branch":"main","last_synced_at":"2025-01-12T11:33:51.057Z","etag":null,"topics":["javascript","js","lazy","list","load","packages","palestine","performance","svelte","virtual","vue","web"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/omer73364.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-02-14T11:27:34.000Z","updated_at":"2024-08-23T10:44:00.000Z","dependencies_parsed_at":"2024-06-21T15:34:12.387Z","dependency_job_id":"21efa03a-b340-425e-8440-499f1b1cb0c2","html_url":"https://github.com/omer73364/lazy-load-list","commit_stats":{"total_commits":30,"total_committers":3,"mean_commits":10.0,"dds":"0.16666666666666663","last_synced_commit":"8c03d9af1d18b8c6de0f5de128945b030233e168"},"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omer73364%2Flazy-load-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omer73364%2Flazy-load-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omer73364%2Flazy-load-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/omer73364%2Flazy-load-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/omer73364","download_url":"https://codeload.github.com/omer73364/lazy-load-list/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":233798074,"owners_count":18731912,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["javascript","js","lazy","list","load","packages","palestine","performance","svelte","virtual","vue","web"],"created_at":"2025-01-13T19:35:01.319Z","updated_at":"2025-09-21T21:31:43.848Z","avatar_url":"https://github.com/omer73364.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Lazy Load List\n\n### # Stand With Palestine 🇵🇸\n\n### Lazy Load List is a lightweight web package that loads items in lazy way to achieve high performance and better UX in large lists.\n\nRendering 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..\n\nyou can notice the deference here:\n\n![loading performance deference](https://lh3.googleusercontent.com/pw/AM-JKLXhB1jRKtOi4OhwEfINuYPKGD0LF4XBoQa0XbFoH9jUPQGW0GsOEl-cgnGzIrutEarCEwIDfV23jpI80P-xtIsgmv9oJD2KfImErE66p-5EukjEPCSVefObsHcS7FvZXnjSqC-MpnCpa-Vywq61KvGb=w1280-h720-no?authuser=0)\n## Features\n\n - Fast Loading 🚀\n - Lightweight package\n - Better user experience \n - Supports most loved JS frameworks\n - Supports SSR \u0026 SSG\n\n## Demo\n\n-  [Simple example in Svelte js](https://lazy-load-svelte-example.netlify.com)\n-  [Simple example in Vue js](https://lazy-load-vue-example.netlify.com)\n-  [Simple example in React js](https://lazy-load-react-example.netlify.com)\n\nyou can find the source code of examples in [examples](https://github.com/omer73364/lazy-load-list/tree/main/examples) folder\n\n## Lazy Load List 1.2 is here 🎉\n\n### what's new?\n\n - support React js\n - auto loading items when container can contain more\n - better performance\n - explain using custom loading element\n\n## Supported Frameworks\n\u003cpre\u003e\n| \u003cimg width=\"14\" src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Svelte_Logo.svg/1200px-Svelte_Logo.svg.png\" alt=\"svelte logo\"/\u003e | Svete js     | ✅\n| \u003cimg width=\"14\" src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/2367px-Vue.js_Logo_2.svg.png\" alt=\"vue logo\"/\u003e | Vue js (2,3) | ✅\n| \u003cimg width=\"14\" src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/React.svg/640px-React.svg.png\" alt=\"react logo\"/\u003e | React js     | ✅\n\u003c/pre\u003e\n\n## Installation\n\ninstall the package using npm or yarn:\n\ninstall using npm\n\n`  $ npm i lazy-load-list `\n\nor using yarn\n\n`  $ yarn add lazy-load-list `\n\n## Usage\n\n\u003e ⚠  you must wrap the list by div and specify the height and width in the wrapper div.\n\n- \u003cimg width=\"14\" src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Svelte_Logo.svg/1200px-Svelte_Logo.svg.png\" alt=\"svelte logo\"/\u003e svelte js:\n\n\u003e \n\timport LazyList from 'lazy-load-list/svelte'\n\n\t\u003cdiv  class=\"container\"\u003e\n\t\t\u003cLazyList\n\t\t\tdata={colors}\n\t\t\titemsPerRender={15}\n\t\t\tcontainerClasses=\"list\"\n\t\t\tdefaultLoadingColor=\"#222\"\n\t\t\tlet:item={item}\n\t\t\u003e\n\t\t\t\u003ch1\u003e{ item }\u003c/h1\u003e\n\t\t\u003c/LazyList\u003e\n\t\u003c/div\u003e\n\n- \u003cimg width=\"14\" src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/2367px-Vue.js_Logo_2.svg.png\" alt=\"vue logo\"/\u003e vue js:\n\n\u003e \n\t\u003cdiv class=\"container\"\u003e\n\t\t\u003cLazyList\n\t\t\t:data=\"items\"\n\t\t\t:itemsPerRender=\"15\"\n\t\t\tcontainerClasses=\"list\"\n\t\t\tdefaultLoadingColor=\"#222\"\n\t\t\u003e\n\t\t\t\u003ctemplate v-slot=\"{item}\"\u003e\n\t\t\t    \u003ch1\u003e{{ item }}\u003c/h1\u003e\n\t\t\t\u003c/template\u003e\n\t\t\u003c/LazyList\u003e\n\t\u003c/div\u003e\n\n\t// script\n\timport LazyList from 'lazy-load-list/vue'\n\t..\n\tcomponents: { LazyList } // don't forget to define it in the components\n\t\n\n- \u003cimg width=\"14\" src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/React.svg/640px-React.svg.png\" alt=\"react logo\"/\u003e react js:\n\n\u003e \n\timport  LazyList  from  'lazy-load-list/react'\n\t\n\tconst renderItem = ({item, index}) =\u003e (\n\t\t\u003ch1 key={index}\u003e{ item }\u003c/h1\u003e\n\t)\n\t\n\t\u003cdiv className=\"container\"\u003e\n\t\t\u003cLazyList\n\t\t\tdata={colors}\n\t\t\titemsPerRender={15}\n\t\t\tcontainerClasses=\"list\"\n\t\t\tdefaultLoadingColor=\"#222\"\n\t\t\trenderItem={renderItem}\n\t\t/\u003e\n\t\u003c/div\u003e\n\t\n## Props\n\n\u003ctable\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003eprop\u003c/td\u003e\n\t\t\u003ctd\u003esupported framework\u003c/td\u003e\n\t\t\u003ctd\u003edescription\u003c/td\u003e\n\t\t\u003ctd\u003erequired\u003c/td\u003e\n\t\t\u003ctd\u003etype\u003c/td\u003e\n\t\t\u003ctd\u003edefault value\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003edata\u003c/td\u003e\n\t\t\u003ctd\u003eall\u003c/td\u003e\n\t\t\u003ctd\u003ethe item array\u003c/td\u003e\n\t\t\u003ctd\u003eyes\u003c/td\u003e\n\t\t\u003ctd\u003earray\u003c/td\u003e\n\t\t\u003ctd\u003e[]\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003eitemsPerRender\u003c/td\u003e\n\t\t\u003ctd\u003eall\u003c/td\u003e\n\t\t\u003ctd\u003eitems to be rendered per load\u003c/td\u003e\n\t\t\u003ctd\u003eyes\u003c/td\u003e\n\t\t\u003ctd\u003enumber\u003c/td\u003e\n\t\t\u003ctd\u003e3\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003econtainerClasses\u003c/td\u003e\n\t\t\u003ctd\u003eall\u003c/td\u003e\n\t\t\u003ctd\u003elist container classes for CSS\u003c/td\u003e\n\t\t\u003ctd\u003eno\u003c/td\u003e\n\t\t\u003ctd\u003estring\u003c/td\u003e\n\t\t\u003ctd\u003e''\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003edefaultLoading\u003c/td\u003e\n\t\t\u003ctd\u003eall\u003c/td\u003e\n\t\t\u003ctd\u003eto show the default loading or not\u003c/td\u003e\n\t\t\u003ctd\u003eno\u003c/td\u003e\n\t\t\u003ctd\u003ebool\u003c/td\u003e\n\t\t\u003ctd\u003etrue\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003edefaultLoadingColor\u003c/td\u003e\n\t\t\u003ctd\u003eall\u003c/td\u003e\n\t\t\u003ctd\u003ecolor of the default loading \u003c/td\u003e\n\t\t\u003ctd\u003eno\u003c/td\u003e\n\t\t\u003ctd\u003estring\u003c/td\u003e\n\t\t\u003ctd\u003e'#18191A'\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003erenderItem\u003c/td\u003e\n\t\t\u003ctd\u003eReact js\u003c/td\u003e\n\t\t\u003ctd\u003eelement to be render for each item\u003c/td\u003e\n\t\t\u003ctd\u003eyes\u003c/td\u003e\n\t\t\u003ctd\u003eReact component\u003c/td\u003e\n\t\t\u003ctd\u003e() =\u003e null\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003eloadingComponent\u003c/td\u003e\n\t\t\u003ctd\u003eReact js\u003c/td\u003e\n\t\t\u003ctd\u003ecustom loading component\u003c/td\u003e\n\t\t\u003ctd\u003eno\u003c/td\u003e\n\t\t\u003ctd\u003eReact component\u003c/td\u003e\n\t\t\u003ctd\u003e() =\u003e null\u003c/td\u003e\n\t\u003c/tr\u003e\n\u003c/table\u003e\n\n\n## Using custom loading element\n\nyou can specify the loading element color using (defaultLoadingColor) prop..\nbut if you don't like the default loading element, you can use custom one:\n\n\n- in \u003cimg width=\"14\" src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/1/1b/Svelte_Logo.svg/1200px-Svelte_Logo.svg.png\" alt=\"svelte logo\"/\u003e svelte js \u0026  \u003cimg width=\"14\" src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/9/95/Vue.js_Logo_2.svg/2367px-Vue.js_Logo_2.svg.png\" alt=\"vue logo\"/\u003e vue js (just use slot name \"loading like this):\n\n\u003e \n\t\u003cimg slot=\"loading\" src=\"loading.svg\" width=\"16\" alt=\"loading\"/\u003e\n\n- \u003cimg width=\"14\" src=\"https://upload.wikimedia.org/wikipedia/commons/thumb/4/47/React.svg/640px-React.svg.png\" alt=\"react logo\"/\u003e react js (use loadingComponent props to pass the element):\n\n\u003e \n\t\t..\n\t\t\tloadingComponent={loadingElementHere}\n\t\t/\u003e\n\t\n\t\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomer73364%2Flazy-load-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fomer73364%2Flazy-load-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fomer73364%2Flazy-load-list/lists"}