react-sway 0.1.0 → 0.1.1

package/README.md

@@ -0,0 +1,87 @@
+# react-sway
+
+A React component for smooth, infinite, and interactive content scrolling. It duplicates content to create a seamless looping effect, controllable via touch, mouse drag, wheel, and keyboard.
+
+## What is `react-sway`?
+
+React Sway takes your list of items and makes them scroll endlessly. It's designed to be easy to use and performant, with auto-scrolling that pauses when users interact.
+
+It works by duplicating your content to create a seamless loop and uses CSS transforms for smooth animation. The duplicated content is wrapped in `<aside>` elements with `aria-hidden="true"` and `role="presentation"` to ensure good accessibility and helps search engines understand the content structure.
+
+### Core Features
+
+*   **Smooth Infinite Scroll:** Content loops continuously.
+*   **Auto-Scroll:** Scrolls automatically, with configurable speed.
+*   **User Friendly Interactions:**
+    *   Click and drag to scroll.
+    *   Swipe on touch devices.
+    *   Mouse wheel support.
+    *   Keyboard controls: Spacebar to pause/resume, ArrowUp/ArrowDown to scroll, Home/End to jump.
+*   **Responsive:** Adjusts to window resizing.
+*   **Lazy Loading Hook:** Add a `content-item` class to your child elements, and `react-sway` will add a `.visible` class when they enter the viewport. Handy for animations or loading content.
+
+## Installation
+
+```bash
+npm install react-sway
+# or
+yarn add react-sway
+# or
+pnpm add react-sway
+```
+
+## Usage
+
+```tsx
+import { ReactSway } from 'react-sway';
+import './index.css'; // Your global styles
+
+function SwayUsageExample() {
+  return (
+    <div className="scroller-container"> {/* Style this container to define ReactSway's area (e.g., full-page, or a specific height) */}
+      <ReactSway>
+        <div className="content-item" style={{ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }}>
+          <h2>Seamless Scrolling</h2>
+          <p>Experience buttery smooth infinite scrolling with no stutters or pauses.</p>
+        </div>
+
+        <div className="content-item" style={{ background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' }}>
+          <h2>Touch & Mouse Support</h2>
+          <p>Interact naturally with touch gestures, mouse wheel, or click-and-drag.</p>
+        </div>
+
+        <div className="content-item" style={{ background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' }}>
+          <h2>Momentum Scrolling</h2>
+          <p>Flick to scroll with realistic physics-based momentum and friction.</p>
+        </div>
+
+        <div className="content-item" style={{ background: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' }}>
+          <h2>Performance Optimized</h2>
+          <p>Using requestAnimationFrame for 60+ FPS scrolling on all devices.</p>
+        </div>
+
+        <div className="content-item" style={{ background: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' }}>
+          <h2>Responsive Design</h2>
+          <p>Adapts perfectly to any screen size and device orientation.</p>
+        </div>
+
+        <div className="content-item" style={{ background: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)' }}>
+          <h2>No Native Scroll</h2>
+          <p>Custom implementation avoids native scroll jank and inconsistencies.</p>
+        </div>
+
+        <div className="content-item" style={{ background: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' }}>
+          <h2>Continuous Loop</h2>
+          <p>Content loops seamlessly without any visible seams or jumps.</p>
+        </div>
+      </ReactSway>
+    </div>
+  );
+}
+
+export default SwayUsageExample;
+```
+
+## License
+
+This package is licensed under the [MIT License](../../LICENSE).

package/dist/index.cjs

@@ -55,7 +55,6 @@ function ReactSway({ children }) {
         containerRef.current.offsetHeight;
         const currentContentHeight = containerRef.current.scrollHeight;
         const calculatedLoopPoint = currentContentHeight / 3;
-        console.log("Calculating dimensions:", { currentContentHeight, calculatedLoopPoint });
         if (currentContentHeight > 0) {
           setContentHeight(currentContentHeight);
           setLoopPoint(calculatedLoopPoint);
@@ -314,18 +313,6 @@ function ReactSway({ children }) {
       observer.disconnect();
     };
   }, [children, contentHeight]);
-  (0, import_react.useEffect)(() => {
-    const originalBodyStyle = {
-      touchAction: document.body.style.touchAction,
-      overflow: document.body.style.overflow
-    };
-    document.body.style.touchAction = "none";
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.touchAction = originalBodyStyle.touchAction;
-      document.body.style.overflow = originalBodyStyle.overflow;
-    };
-  }, []);
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
     "div",
     {
@@ -344,6 +331,8 @@ function ReactSway({ children }) {
         msUserSelect: "none",
         MozUserSelect: "none",
         overscrollBehavior: "contain",
+        overflow: "hidden",
+        // Prevent component's content from overflowing and causing page scroll
         // Ensure it's on top and can receive events
         pointerEvents: "auto",
         zIndex: 1

package/dist/index.js

@@ -29,7 +29,6 @@ function ReactSway({ children }) {
         containerRef.current.offsetHeight;
         const currentContentHeight = containerRef.current.scrollHeight;
         const calculatedLoopPoint = currentContentHeight / 3;
-        console.log("Calculating dimensions:", { currentContentHeight, calculatedLoopPoint });
         if (currentContentHeight > 0) {
           setContentHeight(currentContentHeight);
           setLoopPoint(calculatedLoopPoint);
@@ -288,18 +287,6 @@ function ReactSway({ children }) {
       observer.disconnect();
     };
   }, [children, contentHeight]);
-  useEffect(() => {
-    const originalBodyStyle = {
-      touchAction: document.body.style.touchAction,
-      overflow: document.body.style.overflow
-    };
-    document.body.style.touchAction = "none";
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.body.style.touchAction = originalBodyStyle.touchAction;
-      document.body.style.overflow = originalBodyStyle.overflow;
-    };
-  }, []);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -318,6 +305,8 @@ function ReactSway({ children }) {
         msUserSelect: "none",
         MozUserSelect: "none",
         overscrollBehavior: "contain",
+        overflow: "hidden",
+        // Prevent component's content from overflowing and causing page scroll
         // Ensure it's on top and can receive events
         pointerEvents: "auto",
         zIndex: 1

package/package.json

@@ -59,5 +59,5 @@
   },
   "type": "module",
   "types": "dist/index.d.ts",
-  "version": "0.1.0"
+  "version": "0.1.1"
 }

package/src/ReactSway.tsx

@@ -44,7 +44,7 @@ function ReactSway({ children }: ReactSwayProps) {
         const currentContentHeight = containerRef.current.scrollHeight;
         const calculatedLoopPoint = currentContentHeight / 3;
 
-        console.log('Calculating dimensions:', { currentContentHeight, calculatedLoopPoint });
+        // console.log('Calculating dimensions:', { currentContentHeight, calculatedLoopPoint });
 
         if (currentContentHeight > 0) {
           setContentHeight(currentContentHeight);
@@ -354,24 +354,6 @@ function ReactSway({ children }: ReactSwayProps) {
     };
   }, [children, contentHeight]);
 
-  // Apply styles to override conflicting CSS
-  useEffect(() => {
-    const originalBodyStyle = {
-      touchAction: document.body.style.touchAction,
-      overflow: document.body.style.overflow
-    };
-
-    // Override body styles that might conflict
-    document.body.style.touchAction = 'none';
-    document.body.style.overflow = 'hidden';
-
-    return () => {
-      // Restore original styles
-      document.body.style.touchAction = originalBodyStyle.touchAction;
-      document.body.style.overflow = originalBodyStyle.overflow;
-    };
-  }, []);
-
   return (
     <div
       className="react-sway-container scroller-content"
@@ -389,6 +371,7 @@ function ReactSway({ children }: ReactSwayProps) {
         msUserSelect: 'none',
         MozUserSelect: 'none',
         overscrollBehavior: 'contain',
+        overflow: 'hidden', // Prevent component's content from overflowing and causing page scroll
         // Ensure it's on top and can receive events
         pointerEvents: 'auto',
         zIndex: 1