React-Ionic Segment with swipe right and left

PHOTO EMBED

Thu Nov 17 2022 07:37:04 GMT+0000 (Coordinated Universal Time)

Saved by @Martinluther #undefined 

​// added useRef 
import React, { useState, useRef } from 'react';
import {
  IonSegment, IonSegmentButton, IonRow, IonCol, IonGrid, IonContent, IonSlides,
  IonSlide,IonLabel,
} from '@ionic/react';

//import Segment from '../components/Segment';
const Market: React.FC = () => {

  // a ref variable to handle the current slider
  const slider = useRef<HTMLIonSlidesElement>(null);
  // a state value to bind segment value
  const [value, setValue] = useState("0");

  const slideOpts = {
    initialSlide: 0,
    speed: 400,
    loop: false,
    pagination: {
      el: null
    },

  };

  // a function to handle the segment changes
  const handleSegmentChange = (e: any) => {
    if(e.detail.value != null  || e.detail.value != undefined ){
      setValue(e.detail.value);
      slider.current!.slideTo(e.detail.value);
    } 
  };

  // a function to handle the slider changes
  const handleSlideChange = async (event: any) => {
    let index: number = 0;
    await event.target.getActiveIndex().then((value: any) => (index = value));
    setValue('' + index)
  }
 

  return (
    <>

      <IonSegment value={value} onIonChange={(e) => handleSegmentChange(e)} >
      <IonSegmentButton value="0">
          <IonLabel>Message</IonLabel>
        </IonSegmentButton>

        <IonSegmentButton value="1">
          <IonLabel>Favourite</IonLabel>
        </IonSegmentButton>

        <IonSegmentButton value="2">
          <IonLabel>Calls</IonLabel>
        </IonSegmentButton>
      </IonSegment>

      <IonContent>
        {/*-- Market Segment --*/}
        {/*-- the ref method binds this slider to slider variable --*/}
        <IonSlides pager={true} options={slideOpts} onIonSlideDidChange={(e) => handleSlideChange(e)} ref={slider}>
          <IonSlide>
            <IonGrid>
              <IonRow>
                <IonCol>
                  <h1>Masseges</h1>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate corporis magnam officiis molestias molestiae, sed itaque illum unde inventore animi consequatur aliquam id tempora a libero consectetur ratione eveniet illo harum dignissimos corrupti eaque tempore exercitationem? Voluptatibus ea dolorem quisquam voluptatem, eum ducimus quibusdam veniam, itaque laboriosam placeat, magni aspernatur.</p>
                </IonCol>
              </IonRow>
            </IonGrid>
          </IonSlide>
          {/*-- Package Segment --*/}
          <IonSlide>
            <IonGrid>
              <IonRow>
                <IonCol>
                  <h1>Favourite</h1>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate corporis magnam officiis molestias molestiae, sed itaque illum unde inventore animi consequatur aliquam id tempora a libero consectetur ratione eveniet illo harum dignissimos corrupti eaque tempore exercitationem? Voluptatibus ea dolorem quisquam voluptatem, eum ducimus quibusdam veniam, itaque laboriosam placeat, magni aspernatur.</p>
                </IonCol>
              </IonRow>
            </IonGrid>
          </IonSlide>

          <IonSlide>
            <IonGrid>
              <IonRow>
                <IonCol>
                  <h1>Calls</h1>
                  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate corporis magnam officiis molestias molestiae, sed itaque illum unde inventore animi consequatur aliquam id tempora a libero consectetur ratione eveniet illo harum dignissimos corrupti eaque tempore exercitationem? Voluptatibus ea dolorem quisquam voluptatem, eum ducimus quibusdam veniam, itaque laboriosam placeat, magni aspernatur.</p>
                </IonCol>
              </IonRow>
            </IonGrid>
          </IonSlide>
        </IonSlides>
      </IonContent>
    </>
  )
}

export default Market;
content_copyCOPY

https://codepen.io/pen