{"id":23896654,"url":"https://github.com/ismail-mouyahada/lodscroljs-library","last_synced_at":"2026-02-13T07:11:21.418Z","repository":{"id":244111932,"uuid":"814298619","full_name":"Ismail-Mouyahada/lodscroljs-library","owner":"Ismail-Mouyahada","description":"LodScrolJS Documentation LodScrolJS is a lightweight, fast, and secure JavaScript library designed to load any type of content from APIs on scroll, helping to avoid loading too much data at once. It works seamlessly with various JavaScript frameworks ","archived":false,"fork":false,"pushed_at":"2024-12-28T21:05:18.000Z","size":4430,"stargazers_count":1,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-04-07T03:35:40.084Z","etag":null,"topics":["data","data-visualization","load-on-scroll","loading","loading-spinner","loadonscroll","scroll"],"latest_commit_sha":null,"homepage":"https://www.ismail-mouyahada.com/","language":"TypeScript","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/Ismail-Mouyahada.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":"2024-06-12T18:20:41.000Z","updated_at":"2024-12-28T21:05:21.000Z","dependencies_parsed_at":"2024-06-13T00:43:06.008Z","dependency_job_id":"5e219016-75cb-45f4-ad03-85191fd1017d","html_url":"https://github.com/Ismail-Mouyahada/lodscroljs-library","commit_stats":null,"previous_names":["ismail-mouyahada/lodscroljs-library"],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ismail-Mouyahada%2Flodscroljs-library","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ismail-Mouyahada%2Flodscroljs-library/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ismail-Mouyahada%2Flodscroljs-library/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Ismail-Mouyahada%2Flodscroljs-library/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Ismail-Mouyahada","download_url":"https://codeload.github.com/Ismail-Mouyahada/lodscroljs-library/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248252721,"owners_count":21072701,"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":["data","data-visualization","load-on-scroll","loading","loading-spinner","loadonscroll","scroll"],"created_at":"2025-01-04T16:53:54.701Z","updated_at":"2026-02-13T07:11:16.395Z","avatar_url":"https://github.com/Ismail-Mouyahada.png","language":"TypeScript","funding_links":["https://img.buymeacoffee.com/button-api/?text=Buy+me+a+coffee\u0026emoji=","https://www.buymeacoffee.com/ismailmouyahada"],"categories":[],"sub_categories":[],"readme":"![image](https://github.com/user-attachments/assets/02e71094-9a5d-4863-bff1-54b26b9b9022)\n\nLodScrolJS Documentation\nLodScrolJS is a lightweight, fast, and secure JavaScript library designed to load any type of content from APIs on scroll, helping to avoid loading too much data at once. It works seamlessly with various JavaScript frameworks, including React, Angular, Vue.js, and plain JavaScript.\n\n[![Buy me a coffee](https://img.buymeacoffee.com/button-api/?text=Buy+me+a+coffee\u0026emoji=☕\u0026slug=ismailmouyahada\u0026button_colour=FFDD00\u0026font_colour=000000\u0026font_family=Poppins\u0026outline_colour=000000\u0026coffee_colour=ffffff)](https://www.buymeacoffee.com/ismailmouyahada)\n \n\n## Installation\n\n```sh\nnpm install lodscroljs\n```\n \n- CDN lodscroljs `https://cdn.jsdelivr.net/gh/Ismail-Mouyahada/lodscroljs-library@main/dist/index.js`\n \n### Options\n- `container`: The scroll container (default: `window`)\n- `loadMore`: An async function to load more content from APIs. It receives a `done` callback to call when loading is complete.\n- `threshold`: The distance from the bottom of the container to trigger loading more content (default: `100`)\n\n\n## React (TypeScript)\n \n```ts\nimport React, { useEffect, useState } from 'react';\nimport LodScrolJS from 'lodscroljs';\n\nconst MyComponent: React.FC = () =\u003e {\n  const [data, setData] = useState\u003cstring[]\u003e([]);\n  const [page, setPage] = useState\u003cnumber\u003e(1);\n\n  useEffect(() =\u003e {\n    const lodscrol = new LodScrolJS({\n      container: window,\n      loadMore: async (done) =\u003e {\n        try {\n          const newData = await fetchFakeData(page);\n          setData((prevData) =\u003e [...prevData, ...newData]);\n          setPage((prevPage) =\u003e prevPage + 1);\n          done();\n        } catch (error) {\n          console.error('Error loading data', error);\n          done();\n        }\n      },\n      threshold: 100,\n    });\n\n    return () =\u003e lodscrol.destroy();\n  }, [page]);\n\n  const fetchFakeData = async (page: number): Promise\u003cstring[]\u003e =\u003e {\n    return new Promise((resolve) =\u003e {\n      setTimeout(() =\u003e {\n        const newData = Array.from({ length: 10 }, (_, i) =\u003e `Item ${i + 1 + (page - 1) * 10}`);\n        resolve(newData);\n      }, 1000);\n    });\n  };\n\n  return (\n    \u003cdiv\u003e\n      {data.map((item, index) =\u003e (\n        \u003cdiv key={index}\u003e{item}\u003c/div\u003e\n      ))}\n    \u003c/div\u003e\n  );\n};\n\nexport default MyComponent;\n\n```\n\n## Angular\n\n```ts\n\nimport { Component, OnInit, OnDestroy } from '@angular/core';\nimport LodScrolJS from 'lodscroljs';\n\n@Component({\n  selector: 'app-my-component',\n  template: `\n    \u003cdiv *ngFor=\"let item of data\"\u003e{{ item }}\u003c/div\u003e\n  `,\n})\nexport class MyComponent implements OnInit, OnDestroy {\n  private lodscrol: any;\n  public data: string[] = [];\n  private page: number = 1;\n\n  ngOnInit() {\n    this.lodscrol = new LodScrolJS({\n      container: window,\n      loadMore: async (done) =\u003e {\n        try {\n          const newData = await this.fetchFakeData(this.page);\n          this.data = [...this.data, ...newData];\n          this.page += 1;\n          done();\n        } catch (error) {\n          console.error('Error loading data', error);\n          done();\n        }\n      },\n      threshold: 100,\n    });\n  }\n\n  ngOnDestroy() {\n    this.lodscrol.destroy();\n  }\n\n  private fetchFakeData(page: number): Promise\u003cstring[]\u003e {\n    return new Promise((resolve) =\u003e {\n      setTimeout(() =\u003e {\n        const newData = Array.from({ length: 10 }, (_, i) =\u003e `Item ${i + 1 + (page - 1) * 10}`);\n        resolve(newData);\n      }, 1000);\n    });\n  }\n}\n\n```\n\n## Vue\n\n```html\n\u003ctemplate\u003e\n  \u003cdiv\u003e\n    \u003cdiv v-for=\"(item, index) in data\" :key=\"index\"\u003e{{ item }}\u003c/div\u003e\n  \u003c/div\u003e\n\u003c/template\u003e\n\n\u003cscript lang=\"ts\"\u003e\nimport { defineComponent, onMounted, onBeforeUnmount, ref } from 'vue';\nimport LodScrolJS from 'lodscroljs';\n\nexport default defineComponent({\n  name: 'MyComponent',\n  setup() {\n    const data = ref\u003cstring[]\u003e([]);\n    let page = ref\u003cnumber\u003e(1);\n    let lodscrol: LodScrolJS;\n\n    onMounted(() =\u003e {\n      lodscrol = new LodScrolJS({\n        container: window,\n        loadMore: async (done) =\u003e {\n          try {\n            const newData = await fetchFakeData(page.value);\n            data.value = [...data.value, ...newData];\n            page.value += 1;\n            done();\n          } catch (error) {\n            console.error('Error loading data', error);\n            done();\n          }\n        },\n        threshold: 100,\n      });\n    });\n\n    onBeforeUnmount(() =\u003e {\n      lodscrol.destroy();\n    });\n\n    const fetchFakeData = async (page: number): Promise\u003cstring[]\u003e =\u003e {\n      return new Promise((resolve) =\u003e {\n        setTimeout(() =\u003e {\n          const newData = Array.from({ length: 10 }, (_, i) =\u003e `Item ${i + 1 + (page - 1) * 10}`);\n          resolve(newData);\n        }, 1000);\n      });\n    };\n\n    return {\n      data,\n    };\n  },\n});\n\u003c/script\u003e\n \n\n\n```\n\n## Vanilla JavaScript\n\n```html\n\u003c!DOCTYPE html\u003e\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003e\n  \u003cmeta charset=\"UTF-8\"\u003e\n  \u003cmeta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"\u003e\n  \u003ctitle\u003eLodScrolJS Demo\u003c/title\u003e\n\u003c/head\u003e\n\u003cbody\u003e\n  \u003cdiv id=\"content\"\u003e\u003c/div\u003e\n  \u003cscript type=\"module\"\u003e\n    import LodScrolJS from 'lodscroljs';\n\n    document.addEventListener('DOMContentLoaded', () =\u003e {\n      let page = 1;\n\n      const lodscrol = new LodScrolJS({\n        container: window,\n        loadMore: async (done) =\u003e {\n          try {\n            const newData = await fetchFakeData(page);\n            const content = document.getElementById('content');\n            newData.forEach(item =\u003e {\n              const div = document.createElement('div');\n              div.textContent = item;\n              content.appendChild(div);\n            });\n            page += 1;\n            done();\n          } catch (error) {\n            console.error('Error loading data', error);\n            done();\n          }\n        },\n        threshold: 100,\n      });\n\n      async function fetchFakeData(page) {\n        return new Promise((resolve) =\u003e {\n          setTimeout(() =\u003e {\n            const newData = Array.from({ length: 10 }, (_, i) =\u003e `Item ${i + 1 + (page - 1) * 10}`);\n            resolve(newData);\n          }, 1000);\n        });\n      }\n    });\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n\n\n```\n## License\nMIT License\n\n## © 2024 Ismail MOUYAHADA\nThis professional version of lodscroljs is designed to load any type of content from APIs efficiently and securely. The documentation provides clear usage instructions for various frameworks, ensuring ease of integration, and includes the license with the creator's name, Ismail MOUYAHADA.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fismail-mouyahada%2Flodscroljs-library","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fismail-mouyahada%2Flodscroljs-library","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fismail-mouyahada%2Flodscroljs-library/lists"}