Infinite scroll

React Bootstrap 5 Infinite scroll

This feature adds a scroll event listener (to the window or the component it's attached to if it has the overflow-y property set to scroll) and calls a callback method every time a user reaches an end of a page/container.

Note: Read the API tab to find all available options and advanced customization


Basic example

Scroll down the container below to add more items.

Note: Your element should be scrollable, for example, it should have overflow-y: scroll property like in the example below.

  • Angry
  • Dizzy
  • Flushed
  • Frown
  • Grimace
  • Grin

Direction

Use infiniteDirection property to define the scrolling direction.

Angry Dizzy Flushed Grimace Grin

Spinners and asynchronous data


Window

You can set a window as the parent of MDBInfiniteScroll component by using windowParent property.

View full screen demo

Infinite scroll - API


Import


        import { MDBInfiniteScroll } from 'mdb-react-ui-kit';
      

Properties

MDBInfiniteScroll

Name Type Default Description Example
tag String 'div' Defines tag of the MDBInfiniteScroll element <MDBInfiniteScroll tag="section" />
className String '' Add custom class to MDBInfiniteScroll <MDBInfiniteScroll className="class" />
infiniteScrollRef Reference '' A reference for the MDBInfiniteScroll element <MDBInfiniteScroll infiniteScrollRef={exampleReactRef} />
infiniteDirection String 'y' Defines an example scroll direction. <MDBInfiniteScroll infiniteDirection='x' />
windowParent Boolean 'false' Sets window as a parent of MDBInfiniteScroll <MDBInfiniteScroll windowParent />
onInfiniteScroll Function '' This event fires immediately after scrolling to the end of the container. <MDBInfiniteScroll onInfiniteScroll={callback} />