How to implement `getProgress` method in `IonicRefresher` component

Ionic Framework Ionic React
1

Hey guys! I’m trying to implement custom refresher content and I need to get the pull progress when user pulling down the page. I saw this method from the docs: ion-refresher: Pull-to-Refresh Page Content on Ionic Apps but I don’t know where I can access the method and implement it.

Is anyone here can help or give me an example for ionic react 8.4.* please? :pray:

2

You should be able to use the ionPull event.

Something like this:

<IonRefresher slot="fixed" onIonRefresh={handleRefresh} onIonPull={handlePull}>
  <IonRefresherContent></IonRefresherContent>
</IonRefresher>

async function handlePull(event: RefresherCustomEvent) {
  console.log((await event.target.getProgress()))
}

When I tried it in StackBlitz, it was complaining about types not being correct but still worked. I am not familiar with React so not sure what needs to change to fix the type errors.

1 Like
3

It’s working! Thank you very much.

1 Like