@React/Ionic Infinite Scroll - Show msg/toast at the end of scrolling

Ionic Framework Ionic React
1

Hello everyone,

How to tell Ionic/React to show a message/toast for example, when we are at the end of the scrollable list ?

Thank you.

2

@ldebeasi do you have an idea about my question here ?

Thanks.

3

Are you trying to show a toast once you have run out of items to display? If so, you should present the toast after you set disabled="true" on the infinite scroll component.

In React, the code would look something like this:

const loadData = (ev: any) => {
    setTimeout(() => {
      pushData();
      console.log('Loaded data');
      ev.target.complete();
      if (data.length == 1000) {
        setInfiniteDisabled(true);

        // Show the toast using an overlay hook
      }
    }, 500);
  }

You can see examples of how to use overlay hooks here: Using Overlay Components in React - Ionic Documentation

1 Like