Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/javadbat/jb-infinite-scroll
infinite scroll web component
https://github.com/javadbat/jb-infinite-scroll
Last synced: 7 days ago
JSON representation
infinite scroll web component
- Host: GitHub
- URL: https://github.com/javadbat/jb-infinite-scroll
- Owner: javadbat
- License: mit
- Created: 2022-09-14T07:35:04.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-11-12T13:59:27.000Z (about 1 month ago)
- Last Synced: 2024-11-12T14:47:05.520Z (about 1 month ago)
- Language: TypeScript
- Size: 6.84 KB
- Stars: 1
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# jb-infinite-scroll
Infinite scroll web-component with additional features including:
- custom list ui
- empty list state and custom empty list ui
- end of the list state
- enable/disable scroll capture
## installation
```js
import "jb-infinite-scroll" from jb-infinite-scroll;
```
## usage
```html
```
## instruction
### set list Data
you can set your list ui by adding a slot with `name ="infinite-scroll-content"` like the example below:
```html
item 1
item 2
item 3
```
### set loading
you can show loading by setting `is-loading = "true"`. you can set your own loading ui by adding a slot with `name = "loading-content"` like the example below:
```js
const jbInfiniteScroll = document.getElementByTagName('jb-infinite-scroll');
jbInfiniteScroll.isLoading = true;
```
```html
loading
```
### set list empty
if there is no data to show you can set `is-list-empty = "true"`. you can set your own empty list ui by adding a slot with `name = "empty-list-content"` like the example below:
```js
const jbInfiniteScroll = document.getElementByTagName('jb-infinite-scroll');
jbInfiniteScroll.isListEmpty = true;
```
```html
list is empty
```
### set list ended
if there is no more data to show you can set `is-list-ended = "true"`.this disables scroll capturing.
```js
const jbInfiniteScroll = document.getElementByTagName('jb-infinite-scroll');
jbInfiniteScroll.isListEnded = true;
```
```html
```
### disable scroll capture
in some cases if you want to disable capture scroll you can set `disable-capture-scroll = "true"`'
```js
const InfiniteScroll = document.getElementByTagName('jb-infinite-scroll');
InfiniteScroll.disableCaptureScroll = true;
```
### add scroll callback
you can add your onscroll callback function to scrollEnd event listener.
if `is-loading` ,`is-list-empty` ,`is-list-ended` or `disable-capture-scroll` is true the callback function won't be executed.
```js
const InfiniteScroll = document.getElementByTagName('jb-infinite-scroll');
jbInfiniteScroll.addEventListener('scrollEnd',() => {
console.log('scroll')
})
```
### state-change-waiting-behaviour
by default `state-change-waiting-behaviour` is `FORCE_WAIT` thats means when an scroll event fires,scroll is not captured untill on of the `is-loading` ,`is-list-empty` ,`is-list-ended` states updates.
if you want to prevent this behaviour you can set `state-change-waiting-behaviour` to `NO_WAIT`. thats means the scroll callback in not dependent on `is-loading`,`is-list-empty`,`is-list-ended` state update.
### usage overview
```html
item 1
item 2
item 3
list is empty
loading
```