Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ismail-mouyahada/lodscroljs-library
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
https://github.com/ismail-mouyahada/lodscroljs-library
data data-visualization load-on-scroll loading loading-spinner loadonscroll scroll
Last synced: 3 days ago
JSON representation
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
- Host: GitHub
- URL: https://github.com/ismail-mouyahada/lodscroljs-library
- Owner: Ismail-Mouyahada
- Created: 2024-06-12T18:20:41.000Z (7 months ago)
- Default Branch: main
- Last Pushed: 2024-12-28T21:05:18.000Z (10 days ago)
- Last Synced: 2024-12-28T22:18:04.610Z (10 days ago)
- Topics: data, data-visualization, load-on-scroll, loading, loading-spinner, loadonscroll, scroll
- Language: TypeScript
- Homepage: https://www.ismail-mouyahada.com/
- Size: 4.22 MB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
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, including React, Angular, Vue.js, and plain JavaScript.
[](https://www.buymeacoffee.com/ismailmouyahada)
## Installation
```sh
npm install lodscroljs
```
- CDN lodscroljs `https://cdn.jsdelivr.net/gh/Ismail-Mouyahada/lodscroljs-library@main/dist/index.js`
### Options
- `container`: The scroll container (default: `window`)
- `loadMore`: An async function to load more content from APIs. It receives a `done` callback to call when loading is complete.
- `threshold`: The distance from the bottom of the container to trigger loading more content (default: `100`)
## React (TypeScript)
```ts
import React, { useEffect, useState } from 'react';
import LodScrolJS from 'lodscroljs';
const MyComponent: React.FC = () => {
const [data, setData] = useState([]);
const [page, setPage] = useState(1);
useEffect(() => {
const lodscrol = new LodScrolJS({
container: window,
loadMore: async (done) => {
try {
const newData = await fetchFakeData(page);
setData((prevData) => [...prevData, ...newData]);
setPage((prevPage) => prevPage + 1);
done();
} catch (error) {
console.error('Error loading data', error);
done();
}
},
threshold: 100,
});
return () => lodscrol.destroy();
}, [page]);
const fetchFakeData = async (page: number): Promise => {
return new Promise((resolve) => {
setTimeout(() => {
const newData = Array.from({ length: 10 }, (_, i) => `Item ${i + 1 + (page - 1) * 10}`);
resolve(newData);
}, 1000);
});
};
return (
{data.map((item, index) => (
{item}
))}
);
};
export default MyComponent;
```
## Angular
```ts
import { Component, OnInit, OnDestroy } from '@angular/core';
import LodScrolJS from 'lodscroljs';
@Component({
selector: 'app-my-component',
template: `
{{ item }}
`,
})
export class MyComponent implements OnInit, OnDestroy {
private lodscrol: any;
public data: string[] = [];
private page: number = 1;
ngOnInit() {
this.lodscrol = new LodScrolJS({
container: window,
loadMore: async (done) => {
try {
const newData = await this.fetchFakeData(this.page);
this.data = [...this.data, ...newData];
this.page += 1;
done();
} catch (error) {
console.error('Error loading data', error);
done();
}
},
threshold: 100,
});
}
ngOnDestroy() {
this.lodscrol.destroy();
}
private fetchFakeData(page: number): Promise {
return new Promise((resolve) => {
setTimeout(() => {
const newData = Array.from({ length: 10 }, (_, i) => `Item ${i + 1 + (page - 1) * 10}`);
resolve(newData);
}, 1000);
});
}
}
```
## Vue
```html
{{ item }}
import { defineComponent, onMounted, onBeforeUnmount, ref } from 'vue';
import LodScrolJS from 'lodscroljs';
export default defineComponent({
name: 'MyComponent',
setup() {
const data = ref<string[]>([]);
let page = ref<number>(1);
let lodscrol: LodScrolJS;
onMounted(() => {
lodscrol = new LodScrolJS({
container: window,
loadMore: async (done) => {
try {
const newData = await fetchFakeData(page.value);
data.value = [...data.value, ...newData];
page.value += 1;
done();
} catch (error) {
console.error('Error loading data', error);
done();
}
},
threshold: 100,
});
});
onBeforeUnmount(() => {
lodscrol.destroy();
});
const fetchFakeData = async (page: number): Promise<string[]> => {
return new Promise((resolve) => {
setTimeout(() => {
const newData = Array.from({ length: 10 }, (_, i) => `Item ${i + 1 + (page - 1) * 10}`);
resolve(newData);
}, 1000);
});
};
return {
data,
};
},
});
```
## Vanilla JavaScript
```html
LodScrolJS Demo
import LodScrolJS from 'lodscroljs';
document.addEventListener('DOMContentLoaded', () => {
let page = 1;
const lodscrol = new LodScrolJS({
container: window,
loadMore: async (done) => {
try {
const newData = await fetchFakeData(page);
const content = document.getElementById('content');
newData.forEach(item => {
const div = document.createElement('div');
div.textContent = item;
content.appendChild(div);
});
page += 1;
done();
} catch (error) {
console.error('Error loading data', error);
done();
}
},
threshold: 100,
});
async function fetchFakeData(page) {
return new Promise((resolve) => {
setTimeout(() => {
const newData = Array.from({ length: 10 }, (_, i) => `Item ${i + 1 + (page - 1) * 10}`);
resolve(newData);
}, 1000);
});
}
});
```
## License
MIT License
## © 2024 Ismail MOUYAHADA
This 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.