feat: onUserInteraction callback

README.md

@@ -169,6 +169,7 @@ Props
 | `current`                       | `number`               | no           | `undefined`   |
 | `beforeChange`                  | `function`             | no           | `() => {}`    |
 | `afterChange`                   | `function`             | no           | `() => {}`    |
+| `onUserInteraction`             | `function`             | no           | `() => {}`    |
 | `renderArrows`                  | `function`             | no           | `undefined`   |
 | `renderDots`                    | `function`             | no           | `undefined`   |
 | `wrapperClassName`              | `string`               | no           | `undefined`   |
@@ -411,6 +412,27 @@ called after transitions have ended and internal state is updated.
 
 Its signature is `({ previous: number, current: number }) => void`
 
+#### `onUserInteraction`
+
+Type: `function`
+
+Default: `() => {}`
+
+Callback function that is called whenever the user interacts with the carousel,
+either from mouse, touch, or keyboard.
+
+Its signature is `({ type, event }) => void`, where type is one of:
+
+- `'dragStart'`
+- `'keyDown'`
+- `'mouseDown'`
+- `'mouseMove'`
+- `'mouseLeave'`
+- `'mouseUp'`
+- `'touchStart'`
+- `'touchMove'`
+- `'touchEnd'`
+
 #### `renderArrows`
 
 Type: `(props: object) => React.Node`

demo/pages/index.js

@@ -155,6 +155,7 @@ const PropSetter = ({ children }) => {
     const callbacks = {
         beforeChange: logCallbacks ? (v) => console.log('beforeChange', v) : () => {},
         afterChange: logCallbacks ? (v) => console.log('afterChange', v) : () => {},
+        onUserInteraction: logCallbacks ? (type, ev) => console.log('onUserInteraction', type, ev) : () => {},
     };
 
     const renderProps = {

src/Carousel.js

@@ -479,9 +479,11 @@ class Carousel extends Component {
         switch (ev.keyCode) {
         case 37:
             this.handlePrev();
+            this.props.onUserInteraction('keyDown', ev);
             break;
         case 39:
             this.handleNext();
+            this.props.onUserInteraction('keyDown', ev);
             break;
         default:
             break;
@@ -494,6 +496,11 @@ class Carousel extends Component {
         if (!this.props.draggable) { return; }
 
         this.setDragActive(ev);
+        this.props.onUserInteraction('dragStart', ev);
+    };
+
+    handleSliderMouseDown = (ev) => {
+        this.props.onUserInteraction('mouseDown', ev);
     };
 
     handleSliderMouseMove = (ev) => {
@@ -508,11 +515,15 @@ class Carousel extends Component {
             this.containerRef.current.scrollLeft -= ev.movementX;
             this.swapSlides();
         }
+
+        this.props.onUserInteraction('mouseMove', ev);
     };
 
     handleSliderMouseUp = (ev) => {
         if (!this.props.draggable || !this.drag.isActive) { return; }
 
+        this.props.onUserInteraction('mouseUp', ev);
+
         this.setDragInactive(ev)
             .then(() => this.swapSlides())
             .then(() => {
@@ -534,6 +545,7 @@ class Carousel extends Component {
 
     handleSliderMouseLeave = (ev) => {
         this.handleSliderMouseUp(ev);
+        this.props.onUserInteraction('mouseLeave', ev);
     };
 
     handleSlideMouseUp = (ev, slideIndex) => {
@@ -552,12 +564,14 @@ class Carousel extends Component {
 
         this.setLastTouch(ev);
         this.touching = true;
+        this.props.onUserInteraction('touchStart', ev);
     };
 
     handleSliderTouchMove = (ev) => {
         this.setLastTouch(ev);
 
         this.touchScrolling = Math.abs(this.velocity?.x ?? 0) > TOUCH_SCROLLING_VELOCITY_THRESHOLD;
+        this.props.onUserInteraction('touchMove', ev);
     };
 
     handleSliderTouchEnd = (ev) => {
@@ -577,6 +591,8 @@ class Carousel extends Component {
         if (!this.touchScrolling && !disableNativeScroll) {
             this.snapCurrentToPosition();
         }
+
+        this.props.onUserInteraction('touchEnd', ev);
     };
 
     // ------------------------------------------------------------------------ Scroll events handlers
@@ -639,6 +655,7 @@ Carousel.propTypes = {
     current: PropTypes.number,
     beforeChange: PropTypes.func,
     afterChange: PropTypes.func,
+    onUserInteraction: PropTypes.func,
     renderArrows: PropTypes.func,
     renderDots: PropTypes.func,
 
@@ -678,6 +695,7 @@ Carousel.defaultProps = {
 
     beforeChange: noop,
     afterChange: noop,
+    onUserInteraction: noop,
 };
 
 export default Carousel;