How to detect reach beginning or end in React Swiper?

Question

I want to detect reached of slide in Swiper (React.js) with arrow navigate customize. Because I am not using default navigation of Swiper so I couldn't to detect reached of slide by Swiper arrows className provided, I want to hide the prev button and show the next button if slide is reach beginning and ortherwise.

How can I do it?

        <Swiper
            ref={swiperRef}
            slidesPerView={1}
            // navigation={false} // I don't use this 
            {...restOptions}
        >
            {children}
        </Swiper>

      
        // i want something like below: 
        <>
           {!isReachBeginning && (
               <ArrowButton
                  arrowLeft
                  onClick={slidePrev}
               />
           )}

           {!isReachEnd && (
               <ArrowButton
                  arrowRight
                  onClick={slideNext}
               />
           )}
        </>
        

Answer 1

You can use swiper event https://swiperjs.com/swiper-api#event-reachBeginning

 <Swiper
      onReachBeginning={()=>{}}
      onReachEnd={()=>{}}...>

Actually, you can achieve you desired flow by enable the navigation.