0.1.3 ā¢ Published 5 years ago
react-delightful-scroller v0.1.3
Welcome to react-delightful-scroller š
A delightful, virtualized modern infinite scroller š
Features
- Provides delightful infinite scrolling experience for thousands of items
- Uses batching and virtualization techniques to reduce DOM nodes
- Handles fixed and dynamic height elements automatically
- Smooth, aims to achieve 60fps
- Fully customizable
- Uses modern web APIs/features
- Supports vertical scrolling on window (More axis and custom element scroll support soon)
- Tiny library(Around 7kb gzip)
- Many more
Component props
| Property | Type | Required? | Description |
|---|---|---|---|
| items | Array | ā | Items to render, can be array of strings, objects or numbers etc. |
| itemsCount | Number | ā | Total number of items to render, this can be larger than number of items, in that case a sentinel is added at the bottom(infinite scroll) of rendered items and onFetchMore is triggered when page is scrolled to bottom until the number of items are equal to the itemsCount. |
| RenderItem | Component | ā | Component which renders each item. Gets item and index as prop. |
| RenderContainer | Component | Component which renders scroll container. Gets children and forwardRef as prop. | |
| removeFromDOM | Boolean | Should remove/add items from DOM while virtualizing and replace with empty node of same height of item. If set to false, items will be set to visibility: hidden; if not visible in the viewport. Default: true. | |
| root | Function | A function returning scroll parent node. Scroll listener will be attached to this element(if provided) instead of window. Default: null(indicates window/viewport is the scroll parent). | |
| averageItemHeight | Number | Average item height if the items are dynamic. Default: 10. | |
| itemHeight | Number | Fixed item height if the items height is fixed. This takes more priority over averageItemHeight if specified. Default: null. | |
| getItemKey | Function | Specify custom key prop while rendering each item. function receives item and index as argument. | |
| wrapperElement | String | HTML tag used to wrap each rendered item and sentinel. Default: div. | |
| axis | String | Scroll axis. Default: y. | |
| batch | Boolean | Should batch items(check batchSize) or not. Default: true. | |
| batchSize | Number | Batch of items to render at once when virtualizing. Default: 10. | |
| batchBufferDistance | Number | Buffer distance of batch from both side of viewport/scrollable node. the batch is only rendered if the batch overlaps with this offset. Default: 250. | |
| fetchMoreBufferDistance | Number | Buffer distance to trigger onFetchMore. Default: 500. | |
| onFetchMore | Function | Function called when sentinel is near the viewport(when it crosses fetchMoreBufferDistance). The function receives {size, itemsCount, batchSize} as argument. | |
| RenderLoader | Component | Component which renders loader when sentinel triggers onFetchMore(basically, more items are loading). Gets items, itemsCount and batchSize as prop. |
Install
This project uses yarn workspaces. You need to have yarn installed.
yarnUsage
# Develop
yarn watch# Build and serve
yarn build
yarn serveTODO
- Custom container support
- Support more axis - x, y-reverse & x-reverse
- Scroll restoration
- More stories
- Test cases
Author
š¤ Ganapati V S <meetguns.com>
- Twitter: @ganapativs
- Github: @ganapativs
š¤ Contributing
Contributions, issues and feature requests are welcome!Feel free to check issues page.
Show your support
Give a āļø if this project helped you!
š License
Copyright Ā© 2019 Ganapati V S <meetguns.com>. This project is MIT licensed.