react-delightful-scroller

Welcome to react-delightful-scroller 👋

A delightful, virtualized modern infinite scroller 🎉

Demo and usage

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.

yarn

Usage

# Develop 
yarn watch

# Build and serve 
yarn build
yarn serve

TODO

• 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.