How can I programmatically trigger IonRefresher in Ionic 5 React?

Ionic Framework Ionic React
#1

How can I programmatically trigger IonRefresher when I click the button?

<IonContent ref={ionContentRef} slot="fixed">
          
          <IonRefresher
            slot="fixed"          
            onIonRefresh={(e) => {
              doRefresh();
            }}
            ref={ionRefresherRef}>
            <IonRefresherContent
              pullingIcon={null}
              refreshingSpinner="bubbles"
            ></IonRefresherContent>
          </IonRefresher>
...
...
<IonButton onClick={refreshByClickButton}></IonButton>
</IonContent>
#2

Currently not possible. I created a PR some time ago: https://github.com/ionic-team/ionic-framework/pull/21972

Give it a like maybe to prio is higher :blush:

1 Like
#3

I hate to be that guy, but why would you want to do that.

Just use your own loader/spinner or whatever you want… except the IonRefresher.

Create it as a component with flashy gif’s etc. that’s controlled through global state and then use it throughout your application and give the user a consistent experience.

#4

‘give the user a consistent experience’
exactly. To have a single animation/whatever that says “i am refreshing something”. And since the ionRefresher is already there, why not trigger that instead of making your own custom animation/spinner that basically does the same thing?

#5

Because it was, at the time of writing… not possible?

#6

It had been possible in earlier versions of ionic, that’s why we want it. I’m currently upgrading an app from ionic 3 to ionic 5, and this possibility is lost in time. I would really like to have it back :wink: