From 3cc54e216d5c4ceb2ce2c4627f05ac32e9f2bdda Mon Sep 17 00:00:00 2001
From: Putu Audi Pasuatmadi <audipasuatmadi@gmail.com>
Date: Thu, 19 Jun 2025 18:09:12 +0800
Subject: [PATCH] feat: add ability to reverse the horizontal image rotation
 direction

---
 src/ReactImageTurntable.tsx |  2 ++
 src/hooks.ts                | 18 +++++++++++++++---
 src/types.ts                |  2 ++
 3 files changed, 19 insertions(+), 3 deletions(-)

diff --git a/src/ReactImageTurntable.tsx b/src/ReactImageTurntable.tsx
index 3f725a6..e3e5d05 100644
--- a/src/ReactImageTurntable.tsx
+++ b/src/ReactImageTurntable.tsx
@@ -31,6 +31,7 @@ export const ReactImageTurntable: FC<ReactImageTurntableFullProps> = ({
   movementSensitivity = 20,
   onIndexChange,
   autoRotate = { disabled: false },
+  reverseHorizontal = false,
   ...props
 }) => {
   const { ref, activeImageIndex } = useTurntableState({
@@ -38,6 +39,7 @@ export const ReactImageTurntable: FC<ReactImageTurntableFullProps> = ({
     imagesCount: images.length - 1,
     movementSensitivity,
     autoRotate,
+    reverseHorizontal,
   });
 
   const rootStyle: CSSProperties = {
diff --git a/src/hooks.ts b/src/hooks.ts
index 55196d9..d1cbc12 100644
--- a/src/hooks.ts
+++ b/src/hooks.ts
@@ -4,7 +4,10 @@ import type { ReactImageTurntableProps } from './types';
 
 interface UseTurntableStateProps
   extends Required<
-    Pick<ReactImageTurntableProps, 'initialImageIndex' | 'movementSensitivity' | 'autoRotate'>
+    Pick<
+      ReactImageTurntableProps,
+      'initialImageIndex' | 'movementSensitivity' | 'autoRotate' | 'reverseHorizontal'
+    >
   > {
   /** Number of images starting from zero. */
   imagesCount: number;
@@ -15,6 +18,7 @@ export const useTurntableState = ({
   imagesCount,
   movementSensitivity,
   autoRotate,
+  reverseHorizontal,
 }: UseTurntableStateProps) => {
   const [activeImageIndex, setActiveImageIndex] = useState(initialImageIndex);
   const intervalIdRef = useRef<NodeJS.Timeout | null>(null);
@@ -70,12 +74,20 @@ export const useTurntableState = ({
 
       if (distanceDragged <= -movementSensitivity) {
         prevDragPosition = prevDragPosition + movementSensitivity;
-        incrementActiveIndex();
+        if (!reverseHorizontal) {
+          incrementActiveIndex();
+        } else {
+          decrementActiveIndex();
+        }
       }
 
       if (distanceDragged >= movementSensitivity) {
         prevDragPosition = prevDragPosition - movementSensitivity;
-        decrementActiveIndex();
+        if (!reverseHorizontal) {
+          decrementActiveIndex();
+        } else {
+          incrementActiveIndex();
+        }
       }
     };
 
diff --git a/src/types.ts b/src/types.ts
index 2d6f38b..73dbc26 100644
--- a/src/types.ts
+++ b/src/types.ts
@@ -15,6 +15,8 @@ export interface ReactImageTurntableProps {
     /** The speed (in ms) at which the turntable rotates. */
     interval?: number;
   };
+  /** In case you want to change the direction on dragging left/right. */
+  reverseHorizontal?: boolean;
 }
 
 /** Base props *and* all available HTML element props. */