I have added to my project but keep getting the error Make sure you use: <ion-refresher slot="fixed"> in my console and not working in the project.
<code><IonContent>
<IonRefresher
slot="fixed"
onIonRefresh={handleRefresh}
pullFactor={0.5}
pullMin={40}
>
<IonRefresherContent
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing..."
></IonRefresherContent>
</IonRefresher>
/* rest of code */
</IonContent>
</code>
<code><IonContent>
<IonRefresher
slot="fixed"
onIonRefresh={handleRefresh}
pullFactor={0.5}
pullMin={40}
>
<IonRefresherContent
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing..."
></IonRefresherContent>
</IonRefresher>
/* rest of code */
</IonContent>
</code>
<IonContent>
<IonRefresher
slot="fixed"
onIonRefresh={handleRefresh}
pullFactor={0.5}
pullMin={40}
>
<IonRefresherContent
pullingText="Pull to refresh"
refreshingSpinner="circles"
refreshingText="Refreshing..."
></IonRefresherContent>
</IonRefresher>
/* rest of code */
</IonContent>
I have gone through all the documentation and through all the repo issues etc but can’t find any solutons.
2
I have got this working by using the following:
<code>
useEffect(() => {
const refresher = document.getElementById("refresher");
if (refresher) {
refresher.addEventListener(
"ionRefresh",
handleRefresh as unknown as EventListener
);
}
return () => {
if (refresher) {
refresher.removeEventListener(
"ionRefresh",
handleRefresh as unknown as EventListener
);
}
};
}, []);
<ion-refresher
id="refresher"
slot="fixed"
onIonRefresh={(e: CustomEvent) => handleRefresh(e)}
>
<ion-refresher-content />
</ion-refresher>
</code>
<code>
useEffect(() => {
const refresher = document.getElementById("refresher");
if (refresher) {
refresher.addEventListener(
"ionRefresh",
handleRefresh as unknown as EventListener
);
}
return () => {
if (refresher) {
refresher.removeEventListener(
"ionRefresh",
handleRefresh as unknown as EventListener
);
}
};
}, []);
<ion-refresher
id="refresher"
slot="fixed"
onIonRefresh={(e: CustomEvent) => handleRefresh(e)}
>
<ion-refresher-content />
</ion-refresher>
</code>
useEffect(() => {
const refresher = document.getElementById("refresher");
if (refresher) {
refresher.addEventListener(
"ionRefresh",
handleRefresh as unknown as EventListener
);
}
return () => {
if (refresher) {
refresher.removeEventListener(
"ionRefresh",
handleRefresh as unknown as EventListener
);
}
};
}, []);
<ion-refresher
id="refresher"
slot="fixed"
onIonRefresh={(e: CustomEvent) => handleRefresh(e)}
>
<ion-refresher-content />
</ion-refresher>
Seems the react version just doesn’t work so until then, this seems to be a workable solution.