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:

#7

With React it’s possbile:

const refresher = useRef<HTMLIonRefresherElement>(null);

	const handleRefresh = () => {
		if (refresher.current) {
			refresher.current.classList.add('refresher-active');
			refresher.current.classList.add('refresher-refreshing');

			setTimeout(() => {
				refresher.current!.complete();
				refresher.current!.classList.remove('refresher-active');
				refresher.current!.classList.remove('refresher-refreshing');
			}, 2000);
		}
	};

<IonRefresher 
    ref={refresher} 
    slot="fixed" 
    onIonRefresh={handleRefresh}
>
        <IonRefresherContent />
</IonRefresher>

Useful if you want to programatically do a refresh and reuse the same indicator

#8

THE digital marketing agency which provide content writting or many more