📜 bx-stable-infinite-scroll

Demo

Stable bi-directional infinite scroll React component. Load additional data from both ends of a container while maintaining current view. Used for chat, timeline, feed views.

Documentation

Installation

npm install --save bx-stable-infinite-scroll

# or

yarn add bx-stable-infinite-scroll

Usage

Prop	Type	Description
loadingComponent	ReactNode	What to display when fetching more data (e.g. <div>Loading...</div>).
nextDataFn	() => void	Function to fetch next rows.
nextEnd	boolean	No more next rows to fetch.
nextLoading	boolean	Fetching next rows.
previousDataFn	() => void	Function to fetch previous rows.
previousEnd	boolean	No more previous rows to fetch.
previousLoading	boolean	Fetching previous rows.
initialReverse	?boolean	Indicate whether data will initially be loaded from top or bottom of container. Default true (loading data from top).
children	ReactNode	Rows to render

See demo code for detailed usage example.

🚨 Use unique keys for children

Make sure the elements you're passing into <BxInfiniteScroll> have unique and consistent keys.

<BxInfiniteScroll {...props}>
  {map(rows, (row) => {
    return <div key={row.id}>{row.content}</div>
  })}
</BxInfiniteScroll>