Added functionality to disable auto scroll to top.

Author: ashutoshtanwar

.eslintrc.json

@@ -20,6 +20,7 @@
     "react/no-array-index-key": "off",
     "jsx-a11y/click-events-have-key-events": "off",
     "react/function-component-definition": "off",
-    "jsx-a11y/no-static-element-interactions": "off"
+    "jsx-a11y/no-static-element-interactions": "off",
+    "react-hooks/exhaustive-deps": "warn"
   }
 }

example/package.json

@@ -11,7 +11,6 @@
     "@vitejs/plugin-react": "file:../node_modules/@vitejs/plugin-react",
     "react": "file:../node_modules/react",
     "react-dom": "file:../node_modules/react-dom",
-    "react-swipeable-wrapper": "file:..",
     "vite": "file:../node_modules/vite"
   }
 }

example/src/App.jsx

@@ -1,3 +1,4 @@
+/* eslint-disable import/no-unresolved */
 import React, { useCallback, useRef, useState } from "react";
 
 import SwipeableWrapper from "react-swipeable-wrapper";
@@ -98,6 +99,7 @@ const App = () => {
           initialIndex={initialIndex}
           onSlideChange={handleSlideChange}
           bottomBarRef={bottomBarRef}
+          disableAutoScroll
         >
           <div style={{ ...styles.slide, ...styles.slide1 }}>1st slide</div>
           <div style={{ ...styles.slide, ...styles.slide2 }}>2nd slide</div>

example/vite.config.js

@@ -1,7 +1,19 @@
 import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react";
+const path = require("path");
 
 export default defineConfig({
   plugins: [react()],
-  base: "react-swipeable-wrapper",
+  base: "/react-swipeable-wrapper/",
+  resolve: {
+    alias: {
+      "react-swipeable-wrapper": path.resolve(__dirname, "../lib"),
+    },
+  },
+  server: {
+    fs: {
+      // Allow serving files from one level up to the project root
+      allow: [".."],
+    },
+  },
 });

example/yarn.lock

@@ -603,9 +603,6 @@ react-refresh@^0.11.0:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.11.0.tgz#77198b944733f0f1f1a90e791de4541f9f074046"
   integrity sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==
 
-"react-swipeable-wrapper@file:..":
-  version "1.1.0"
-
 "react@file:../node_modules/react":
   version "17.0.2"
   dependencies:

lib/SwipeableWrapper/index.jsx

@@ -43,6 +43,7 @@ const SwipeableWrapper = forwardRef(
       transitionDuration,
       transitionTimingFunction,
       containerStyles,
+      disableAutoScroll,
     },
     ref,
   ) => {
@@ -58,7 +59,7 @@ const SwipeableWrapper = forwardRef(
         const currIndex = index.current;
         rAF(() => {
           onSlideChange(index.current);
-          scrollToTop();
+          if (!disableAutoScroll) scrollToTop();
           const { current: el = null } = elementRef;
           if (el) {
             const height = window.innerHeight - el.clientTop;
@@ -68,7 +69,7 @@ const SwipeableWrapper = forwardRef(
         });
         previousIndex.current = index.current;
       }
-    }, [onSlideChange, rAF]);
+    }, [disableAutoScroll, onSlideChange, rAF]);
 
     const swipeToIndex = useCallback(
       (slideToIndex, avoidAnimation = false) => {
@@ -223,7 +224,10 @@ const SwipeableWrapper = forwardRef(
 
 SwipeableWrapper.propTypes = {
   bottomBarRef: PropTypes.shape({
-    current: PropTypes.oneOf([PropTypes.node, PropTypes.object]),
+    current: PropTypes.oneOfType([
+      PropTypes.node,
+      PropTypes.objectOf(PropTypes.object),
+    ]),
   }),
   initialIndex: PropTypes.number,
   onSlideChange: PropTypes.func,
@@ -232,16 +236,18 @@ SwipeableWrapper.propTypes = {
   transitionDuration: PropTypes.number,
   transitionTimingFunction: PropTypes.string,
   containerStyles: PropTypes.shape({}),
+  disableAutoScroll: PropTypes.bool,
 };
 
 SwipeableWrapper.defaultProps = {
-  bottomBarRef: null,
+  bottomBarRef: { current: null },
   onSlideChange: () => {},
   initialIndex: 0,
   filterNodes: [],
   transitionDuration: 300,
   transitionTimingFunction: "ease-out",
   containerStyles: {},
+  disableAutoScroll: false,
 };
 
 export default memo(SwipeableWrapper);