fix interface, allow react 17, add onCurrentSlideChanged

package.json

@@ -41,7 +41,7 @@
     "test": "jest"
   },
   "peerDependencies": {
-    "react": "^16.8.6"
+    "react": "^16.8.6 || ^17.0.0"
   },
   "husky": {
     "hooks": {

src/Carousel.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import useTouch from "./useTouch";
 import useSlides from "./useSlides";
 import useNavigation from "./useNavigation";
@@ -25,6 +25,7 @@ export interface CarouselProps {
   transitionDuration?: number;
   centerCurrentSlide?: boolean;
   render?: (props: RenderProps) => React.ReactElement;
+  onCurrentSlideChanged?: (currentSlide: number) => void;
 }
 
 export type RefInstance = Pick<RenderProps, "next" | "previous" | "goToStep">
@@ -36,7 +37,8 @@ export default React.forwardRef<unknown, React.PropsWithChildren<CarouselProps>>
     infinite = true,
     transitionDuration = 300,
     centerCurrentSlide = false,
-    render = ({ slides }: RenderProps) => slides
+    render = ({ slides }: RenderProps) => slides,
+    onCurrentSlideChanged,
   },
   ref
 ) => {
@@ -54,6 +56,12 @@ export default React.forwardRef<unknown, React.PropsWithChildren<CarouselProps>>
 
   const { previous, next, goToStep, currentIndex } = navigation;
 
+  useEffect(() => {
+    if (typeof onCurrentSlideChanged === 'function') {
+        onCurrentSlideChanged(currentIndex)
+    }
+  },[currentIndex])
+
   React.useImperativeHandle<unknown, RefInstance>(
     ref,
     () => ({

src/VerticalCarousel.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import useSlides from "./useSlides";
 import useItemSize from "./useItemSize";
 import useNavigation from "./useNavigation";
@@ -19,10 +19,11 @@ export interface RenderProps {
 
 export interface VerticalCarouselProps {
   children: React.ReactElement;
-  slidesToShow: number;
-  infinite: boolean;
-  transitionDuration: number;
-  render: (props: RenderProps) => React.ReactElement;
+  slidesToShow?: number;
+  infinite?: boolean;
+  transitionDuration?: number;
+  render?: (props: RenderProps) => React.ReactElement;
+  onCurrentSlideChanged?: (currentSlide: number) => void;
 }
 
 export default React.forwardRef<
@@ -36,6 +37,7 @@ export default React.forwardRef<
       infinite = true,
       transitionDuration = 300,
       render = ({ slides }: RenderProps) => slides,
+      onCurrentSlideChanged,
     },
     ref: () => void
   ) => {
@@ -53,6 +55,12 @@ export default React.forwardRef<
 
     const { previous, next, goToStep, currentIndex } = navigation;
 
+    useEffect(() => {
+      if (typeof onCurrentSlideChanged === 'function') {
+          onCurrentSlideChanged(currentIndex)
+      }
+    },[currentIndex])
+
     React.useImperativeHandle(
       ref,
       () => ({