Ionic Framework React: Sliding Segments

SlidingSegments.tsx

import {
  IonSegment,
  IonSegmentButton,
  IonLabel,
  IonSlide,
  IonSlides,
} from "@ionic/react";
import React, { useRef, useState } from "react";

const SlidingSegments: React.FC<ContainerProps> = () => {
  const segments = ["friends", "enemies"];
  const slider = useRef<HTMLIonSlidesElement>(null);
  const [value, setValue] = useState("friends");

  const handleSegmentChange = (e: any) => {
    const selectedSegment = segments.findIndex((el) => el === e.detail.value!);
    setValue(e.detail.value!);
    slider.current!.slideTo(selectedSegment);
  };

  const handleSlideChange = async (e: any) => {
    const activeSlide = await slider.current?.getActiveIndex();
    setValue(segments[activeSlide!]);
  };

  return (
    <>
      <IonSegment onIonChange={(e) => handleSegmentChange(e)} value={value}>
        {segments.map((segment, idx) => (
          <IonSegmentButton key={idx} value={segment}>
            <IonLabel>{segment}</IonLabel>
          </IonSegmentButton>
        ))}
      </IonSegment>
      <IonSlides
        pager={true}
        ref={slider}
        onIonSlideDidChange={(e) => handleSlideChange(e)}
      >
        <IonSlide>
          <h1>Slide 1</h1>
        </IonSlide>
        <IonSlide>
          <h1>Slide 2</h1>
        </IonSlide>
      </IonSlides>
    </>
  );
};

export default SlidingSegments;

rohan