Sign Up for Free

RunKit +

Try any Node.js package right in your browser

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:

require("react/package.json"); // react is a peer dependency. var reactDelightfulScroller = require("react-delightful-scroller")

This service is provided by RunKit and is not affiliated with npm, Inc or the package authors.

react-delightful-scroller v0.1.3

Delightful, virtualized modern infinite scroller 🎉

Welcome to react-delightful-scroller 👋

A delightful, virtualized modern infinite scroller 🎉

Demo and usage

Version Greenkeeper badge Documentation Maintenance License: MIT Netlify Status Twitter: ganapativs

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

PropertyTypeRequired?Description
itemsArrayItems to render, can be array of strings, objects or numbers etc.
itemsCountNumberTotal 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.
RenderItemComponentComponent which renders each item. Gets item and index as prop.
RenderContainerComponentComponent which renders scroll container. Gets children and forwardRef as prop.
removeFromDOMBooleanShould 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.
rootFunctionA 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).
averageItemHeightNumberAverage item height if the items are dynamic. Default: 10.
itemHeightNumberFixed item height if the items height is fixed. This takes more priority over averageItemHeight if specified. Default: null.
getItemKeyFunctionSpecify custom key prop while rendering each item. function receives item and index as argument.
wrapperElementStringHTML tag used to wrap each rendered item and sentinel. Default: div.
axisStringScroll axis. Default: y.
batchBooleanShould batch items(check batchSize) or not. Default: true.
batchSizeNumberBatch of items to render at once when virtualizing. Default: 10.
batchBufferDistanceNumberBuffer distance of batch from both side of viewport/scrollable node. the batch is only rendered if the batch overlaps with this offset. Default: 250.
fetchMoreBufferDistanceNumberBuffer distance to trigger onFetchMore. Default: 500.
onFetchMoreFunctionFunction called when sentinel is near the viewport(when it crosses fetchMoreBufferDistance). The function receives {size, itemsCount, batchSize} as argument.
RenderLoaderComponentComponent 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

  • [x] Custom container support
  • [ ] Support more axis - x, y-reverse & x-reverse
  • [ ] Scroll restoration
  • [ ] More stories
  • [ ] Test cases

Author

👤 Ganapati V S <meetguns.com>

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

RunKit is a free, in-browser JavaScript dev environment for prototyping Node.js code, with every npm package installed. Sign up to share your code.
Sign Up for Free