inf-load (<infinite-loading>) : Web component for Infinite loading feature
The inf-load web component is a custom element that provides infinite scrolling functionality. It allows you to load more content as the user scrolls down the page, creating a seamless and efficient user experience.
- Infinite scrolling
- Easy to integrate
- Customizable loading behavior
- Lightweight and performant
To install the inf-load component, you can use npm:
npm install inf-loadHere's a simple example of how to use the inf-load component:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Infinte Loading</title>
</head>
<script>
let page = 1;
const limit = 10;
const url = `https://jsonplaceholder.typicode.com/posts`;
const onFetch = async (fn, more) => {
if(more) page++
const paramMap = new Map()
paramMap.set("_page", page)
paramMap.set("_limit", limit)
fn(url, paramMap).then((res) => {
console.log(res);
});
};
window.onFetch = onFetch;
</script>
<body>
<div class="container p-5">
<infinite-loading fetch="onFetch">
<template>
<style>
@import url("https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css");
</style>
<div class="card mb-3">
<div class="card-body">
<h4 class="card-title" data-inf-load-key="title"></h4>
<p class="card-text" data-inf-load-key="body"></p>
</div>
</div>
</template><!-- Loading template -->
</infinte-loading>
</div>
<script type="module" src="./src/index.ts"></script>
</body>
</html>import "inf-load";
// Track element in the DOM
document.addEventListener("DOMContentLoaded", () => {
console.log(
"Checking for element:",
document.querySelector("infinite-loading")
);
});- HTML
- JavaScript
- CSS
Contributions are welcome! Please feel free to submit a pull request or open an issue.
This project is licensed under the MIT License.