Add onPageChanged callback

Author: LanaIV

README.md

@@ -25,6 +25,7 @@
 - Customized arrow button
 - Customized dots
 - Support SSR
+- Add custom callback for page changement
 
 ## Install
 
@@ -82,6 +83,7 @@ const Gallery = () => {
 | arrowRight                            | Element          |           | Customized left arrow button                                                        |
 | [dot](#dot)                           | Element          |           | Customized dot component with prop `isActive`                                       |
 | containerStyle                        | Object           |           | Style object for carousel container                                                 |
+| onPageChanged                         | Function         |           | Callback triggered for page changement                                              |
 
 ### responsiveLayout
 

examples/home/App.js

@@ -60,6 +60,21 @@ const App = () => {
           </Carousel.Item>
         ))}
       </Carousel>
+      <h4 className="thin">Single column with onPageChanged callback</h4>
+      <Carousel
+        showDots
+        containerStyle={{ maxWidth: '500px' }}
+        onPageChanged={currentPage => console.log(currentPage)}
+      >
+        {[...Array(4)].map((_, i) => (
+          <Carousel.Item key={i}>
+            <img
+              width="100%"
+              src={randomImgUrl.replace('{x}', 400).replace('{y}', 280) + i}
+            />
+          </Carousel.Item>
+        ))}
+      </Carousel>
       <h4 className="thin">Multiple columns</h4>
       <Carousel showDots cols={5}>
         {[...Array(15)].map((_, i) => (

src/components/Carousel.js

@@ -106,7 +106,8 @@ const Carousel = ({
   dot,
   containerClassName = '',
   containerStyle = {},
-  children
+  children,
+  onPageChanged
 }) => {
   const [currentPage, setCurrentPage] = useState(0)
   const [isHover, setIsHover] = useState(false)
@@ -127,6 +128,10 @@ const Carousel = ({
     smoothscroll.polyfill()
   }, [])
 
+  useEffect(() => {
+    onPageChanged && onPageChanged(currentPage)
+  }, [currentPage])
+
   useEffect(() => {
     const { cols, rows, gap, loop, autoplay } = breakpointSetting || {}
     setCols(cols || colsProp)
@@ -436,7 +441,8 @@ Carousel.propTypes = {
     PropTypes.elementType
   ]),
   containerClassName: PropTypes.string,
-  containerStyle: PropTypes.object
+  containerStyle: PropTypes.object,
+  onPageChanged: PropTypes.func
 }
 
 Carousel.Item = ({ children }) => children

stories/Carousel.stories.js

@@ -26,6 +26,20 @@ export const SingleColumn = () => {
   )
 }
 
+export const SingleColumnWithOnPageChangedCallback = () => {
+  const onPageChanged = currentPage => console.log(currentPage)
+
+  return (
+    <Carousel cols={1} rows={1} onPageChanged={onPageChanged}>
+      {[...Array(5)].map((_, i) => (
+        <Carousel.Item key={i}>
+          <Item img={randomImageUrl + i} />
+        </Carousel.Item>
+      ))}
+    </Carousel>
+  )
+}
+
 export const MultiColumns = () => {
   return (
     <Carousel cols={3} rows={1}>