Fix: inability to drag gallery on touch devices (#14)

* fix(docs): add GalleryPaginationItem to table of contents [skip-ci] * fix(Gallery): add touch-action CSS when draggable * style(demo): manage overflow * 3.0.2
wethegit · Nov 14, 2023 · a12e2b6 · a12e2b6
1 parent 1cc95ac
commit a12e2b6
Show file tree

Hide file tree

Showing 5 changed files with 22 additions and 5 deletions.
diff --git a/index.html b/index.html
@@ -4,7 +4,20 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite + React</title>
+    <title>@wethegit/react-gallery</title>
+    <style>
+      body {
+        overscroll-behavior: none;
+      }
+
+      .gallery {
+        overflow: hidden;
+      }
+
+      img {
+        max-width: 100%;
+      }
+    </style>
   </head>
   <body>
     <div id="root"></div>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@wethegit/react-gallery",
-  "version": "3.0.1",
+  "version": "3.0.2",
   "description": "A customizable, accessible gallery component for React projects.",
   "files": [
     "dist"

diff --git a/src/lib/components/gallery-context.jsx b/src/lib/components/gallery-context.jsx
@@ -118,7 +118,7 @@ export const Gallery = ({
   return (
     <GalleryContext.Provider value={value}>
       <div
-        className={classnames(["gallery", className])}
+        className={classnames(["gallery", draggable && "gallery--draggable", className])}
         style={{ "--touch-offset": touchState.xOffset }}
       >
         {children}

diff --git a/src/lib/components/gallery.css b/src/lib/components/gallery.css
@@ -22,6 +22,10 @@
   width: 100%;
 }
 
+.gallery--draggable {
+  touch-action: pan-y;
+}
+
 .gallery__main {
   display: grid;
   grid-template-areas: "item";