IonList Using React - closeSlidingItems()

Ionic Framework
1

Below is an example containing an IonList.

When using React, how can I trigger IonList’s closeSlidingItems() method?

import React from 'react';
import { IonList, IonItem, IonLabel, IonInput, IonToggle, IonRadio, IonCheckbox, IonItemSliding, IonItemOption, IonItemOptions, IonContent } from '@ionic/react';

export const ListExample: React.FC = () => (
  <IonContent>
    {/*-- List of Text Items --*/}
    <IonList>
      <IonItem>
        <IonLabel>Pokémon Yellow</IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel>Mega Man X</IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel>The Legend of Zelda</IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel>Pac-Man</IonLabel>
      </IonItem>
      <IonItem>
        <IonLabel>Super Mario World</IonLabel>
      </IonItem>
    </IonList>
  </IonContent>
);
2

You can use a React ref to get a reference to a component you render. With the useRef hook you can do something like

const ionListRef = useRef();
return (
  <IonList ref={ionListRef}>...</IonList>
);

then you can use the ref to access any methods, e.g.

ionListRef.current.closeSlidingItems();
1 Like