This is a
playground to test code. It runs a full
Node.js environment and already has all of
npm’s 400,000 packages pre-installed, including
react-delightful-scroller with all
npm packages installed. Try it out:
This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.
A delightful, virtualized modern infinite scroller 🎉
|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 |
|RenderItem||Component||✓||Component which renders each item. Gets |
|RenderContainer||Component||Component which renders scroll container. Gets |
|removeFromDOM||Boolean||Should remove/add items from DOM while virtualizing and replace with empty node of same height of item. If set to |
|root||Function||A function returning scroll parent node. Scroll listener will be attached to this element(if provided) instead of |
|averageItemHeight||Number||Average item height if the items are dynamic. Default: |
|itemHeight||Number||Fixed item height if the items height is fixed. This takes more priority over |
|getItemKey||Function||Specify custom |
|wrapperElement||String||HTML tag used to wrap each rendered item and sentinel. Default: |
|axis||String||Scroll axis. Default: |
|batch||Boolean||Should batch items(check |
|batchSize||Number||Batch of items to render at once when virtualizing. Default: |
|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: |
|fetchMoreBufferDistance||Number||Buffer distance to trigger |
|onFetchMore||Function||Function called when sentinel is near the viewport(when it crosses |
|RenderLoader||Component||Component which renders loader when sentinel triggers |
This project uses yarn workspaces. You need to have
# Develop yarn watch
# Build and serve yarn build yarn serve
👤 Ganapati V S <meetguns.com>
Contributions, issues and feature requests are welcome!
Feel free to check issues page.
Give a ⭐️ if this project helped you!