Example of using onSlideChange() function in parent component

[RyanPaiva56]

For anyone looking to do an onChange type callback the main page, here's how I accomplished it:

In the parent component:

const onSlideChange = (selectedIndex: number) => {
  // do something
}

return(
<CarouselProvider
  naturalSlideWidth={100}
  naturalSlideHeight={100}
  totalSlides={albumPhotos.length}
  isIntrinsicHeight
  currentSlide={startingSlideIndex}
 >
  <PhotoSlides albumPhotos={albumPhotos} />
  <PhotoSlidesContext onSlideChange={(index: number) => { onSlideChange(index) }} />
</CarouselProvider>
)

Here's the PhotoSlidesContext component:

import { useContext, useEffect } from 'react';
import { CarouselContext } from 'pure-react-carousel';

interface Props {
  onSlideChange: (arg0: number) => void
}

export default function PhotoSlidesContext(props: Props) {
  const carouselContext = useContext(CarouselContext);
  useEffect(() => {
    function onChange() {
      props.onSlideChange(carouselContext.state.currentSlide)
    }
    carouselContext.subscribe(onChange);
    return () => carouselContext.unsubscribe(onChange);
  }, [carouselContext, props]);
  return (<></>);
}

Hope this helps! And if there's a better way please let me know :)