@goodmanlabs/react-swipe-row 0.1.2 → 0.1.4

package/README.md

@@ -15,6 +15,8 @@ This was built to solve a common UI problem: you want a horizontally scrollable
 - Optional left/right controls appear automatically on “desktop-like” pointers
 - Control styling (buttons) and item spacing are exposed via props (no need to target internal DOM or CSS)
 
+> *Written in TypeScript and ships with types; works in both TypeScript and plain JavaScript projects.*
+
 ---
 
 ## Install
@@ -43,7 +45,12 @@ export default function Example() {
   );
 }
 ```
-> Note: You must import the provided CSS for base layout and snapping behavior.
+> Note: *You must import the provided CSS for base layout, snapping behavior, and default control styling.
+For Next.js users, (App Router): import this CSS in app/layout.(js|tsx) (or your global stylesheet) per Next’s global CSS rules.*
+
+## Framework notes
+
+This component uses React hooks. In Next.js App Router, it’s treated as a client component automatically—no extra "use client" wrapper is needed to consume it. In non-Next React apps (Vite, CRA, Remix, etc.), this has no special impact; it behaves like a normal React component.
 
 ## Props
 
@@ -73,6 +80,12 @@ type SwipeRowClassNames = {
   nextButton?: string;    // next button
 };
 ```
+### `Styling controls (buttons)`
+
+SwipeRow ships with neutral default button styles.
+
+- If you provide any of classNames.controlButton, classNames.prevButton, or classNames.nextButton, the default button styling is automatically disabled so your classes take full control (no !important needed).
+- Use prevButton / nextButton for positioning (e.g. left-2, right-2) and controlButton for shared button styling.
 
 ## Accessibility & Behavior
 

package/dist/index.js

@@ -29,6 +29,7 @@ function SwipeRow({
     if (items) return items;
     return React.Children.toArray(children);
   }, [items, children]);
+  const hasCustomControls = !!(classNames == null ? void 0 : classNames.controlButton) || !!(classNames == null ? void 0 : classNames.prevButton) || !!(classNames == null ? void 0 : classNames.nextButton);
   useEffect(() => {
     const el = scrollerRef.current;
     if (!el) return;
@@ -124,6 +125,7 @@ function SwipeRow({
           "aria-label": "Scroll left",
           className: cx(
             "rsr-control",
+            hasCustomControls && "rsr-control--custom",
             "rsr-prev",
             classNames == null ? void 0 : classNames.controlButton,
             classNames == null ? void 0 : classNames.prevButton
@@ -141,6 +143,7 @@ function SwipeRow({
           "aria-label": "Scroll right",
           className: cx(
             "rsr-control",
+            hasCustomControls && "rsr-control--custom",
             "rsr-next",
             classNames == null ? void 0 : classNames.controlButton,
             classNames == null ? void 0 : classNames.nextButton

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/SwipeRow.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useId, useMemo, useRef, useState } from 'react';\n\nexport type ShowControlsMode = 'auto' | 'always' | 'never';\n\nexport type SwipeRowClassNames = {\n    /** Outer wrapper around the scroller + controls */\n    root?: string;\n    /** The horizontal scroller element */\n    scroller?: string;\n    /** Wrapper around each item (the snap target) */\n    item?: string;\n    /** Shared class applied to both buttons */\n    controlButton?: string;\n    /** Prev button */\n    prevButton?: string;\n    /** Next button */\n    nextButton?: string;\n};\n\nexport type SwipeRowProps = {\n    /** Optional array of React nodes (alternative to children) */\n    items?: React.ReactNode[];\n    children?: React.ReactNode;\n\n    ariaLabel?: string;\n\n    /** Enable CSS scroll-snap */\n    snap?: boolean;\n\n    /** How far arrows / keyboard page (fraction of visible width) */\n    pageFactor?: number;\n\n    /** When to show left/right controls */\n    showControls?: ShowControlsMode;\n\n    /** Optional stable id for aria-controls */\n    id?: string;\n\n    /** Extra class on outer wrapper */\n    className?: string;\n\n    /**\n     * Spacing between items.\n     * This is a class hook (NOT Tailwind-specific). For non-Tailwind consumers,\n     * they'll typically use the provided default CSS and ignore this.\n     */\n    gapClassName?: string;\n\n    /** More granular class hooks */\n    classNames?: SwipeRowClassNames;\n\n    /**\n     * Optional inline style passthrough for the scroller.\n     * Useful for consumers that want scrollbarGutter, etc.\n     */\n    scrollerStyle?: React.CSSProperties;\n};\n\nfunction cx(...parts: Array<string | undefined | false | null>) {\n    return parts.filter(Boolean).join(' ');\n}\n\nexport default function SwipeRow({\n                                     items,\n                                     children,\n                                     ariaLabel = 'Scrollable content',\n                                     className,\n                                     gapClassName,\n                                     snap = true,\n                                     pageFactor = 0.9,\n                                     showControls = 'auto',\n                                     id,\n                                     classNames,\n                                     scrollerStyle,\n                                 }: SwipeRowProps) {\n    const scrollerRef = useRef<HTMLDivElement | null>(null);\n\n    const [canLeft, setCanLeft] = useState(false);\n    const [canRight, setCanRight] = useState(false);\n    const [controlsOn, setControlsOn] = useState(showControls === 'always');\n\n    const autoId = useId();\n    const regionId = id ?? autoId;\n\n    const content = useMemo(() => {\n        if (items) return items;\n        return React.Children.toArray(children);\n    }, [items, children]);\n\n    // Enable/disable arrows based on scroll position\n    useEffect(() => {\n        const el = scrollerRef.current;\n        if (!el) return;\n\n        const update = () => {\n            // tolerance: helps avoid off-by-1 due to subpixel rounding\n            const max = el.scrollWidth - el.clientWidth - 1;\n            setCanLeft(el.scrollLeft > 0);\n            setCanRight(el.scrollLeft < max);\n        };\n\n        update();\n        el.addEventListener('scroll', update, { passive: true });\n        window.addEventListener('resize', update);\n\n        return () => {\n            el.removeEventListener('scroll', update);\n            window.removeEventListener('resize', update);\n        };\n    }, []);\n\n    // Decide when to show controls (desktop-ish)\n    useEffect(() => {\n        if (showControls !== 'auto') {\n            setControlsOn(showControls === 'always');\n            return;\n        }\n\n        const mq = window.matchMedia('(hover: hover) and (pointer: fine)');\n        const set = () => setControlsOn(mq.matches);\n\n        set();\n\n        // Safari fallback\n        if (mq.addEventListener) mq.addEventListener('change', set);\n        // eslint-disable-next-line deprecation/deprecation\n        else mq.addListener?.(set);\n\n        return () => {\n            if (mq.removeEventListener) mq.removeEventListener('change', set);\n            // eslint-disable-next-line deprecation/deprecation\n            else mq.removeListener?.(set);\n        };\n    }, [showControls]);\n\n    const page = (dir: -1 | 1) => {\n        const el = scrollerRef.current;\n        if (!el) return;\n        const step = Math.round(el.clientWidth * pageFactor);\n        el.scrollBy({ left: dir * step, behavior: 'smooth' });\n    };\n\n    // Keyboard paging (a11y)\n    const onKeyDown = (e: React.KeyboardEvent) => {\n        const el = scrollerRef.current;\n        if (!el) return;\n        const step = Math.round(el.clientWidth * pageFactor);\n\n        if (e.key === 'ArrowRight') {\n            e.preventDefault();\n            el.scrollBy({ left: step, behavior: 'smooth' });\n        }\n        if (e.key === 'ArrowLeft') {\n            e.preventDefault();\n            el.scrollBy({ left: -step, behavior: 'smooth' });\n        }\n    };\n\n    return (\n        <div className={cx('rsr-root', className, classNames?.root)}>\n            <div\n                ref={scrollerRef}\n                role=\"region\"\n                aria-label={ariaLabel}\n                tabIndex={0}\n                onKeyDown={onKeyDown}\n                className={cx(\n                    'rsr-scroller',\n                    snap && 'rsr-snap',\n                    gapClassName,\n                    classNames?.scroller\n                )}\n                style={{\n                    WebkitOverflowScrolling: 'touch',\n                    // matches your original (optional, but harmless)\n                    scrollbarGutter: 'stable both-edges',\n                    ...scrollerStyle,\n                }}\n                id={regionId}\n            >\n                {content.map((node, i) => (\n                    <div\n                        key={i}\n                        className={cx('rsr-item', snap && 'rsr-snap-item', classNames?.item)}\n                    >\n                        {node}\n                    </div>\n                ))}\n            </div>\n\n            {controlsOn && (\n                <>\n                    <button\n                        type=\"button\"\n                        onClick={() => page(-1)}\n                        disabled={!canLeft}\n                        aria-controls={regionId}\n                        aria-label=\"Scroll left\"\n                        className={cx(\n                            'rsr-control',\n                            'rsr-prev',\n                            classNames?.controlButton,\n                            classNames?.prevButton\n                        )}\n                    >\n                        ‹\n                    </button>\n\n                    <button\n                        type=\"button\"\n                        onClick={() => page(1)}\n                        disabled={!canRight}\n                        aria-controls={regionId}\n                        aria-label=\"Scroll right\"\n                        className={cx(\n                            'rsr-control',\n                            'rsr-next',\n                            classNames?.controlButton,\n                            classNames?.nextButton\n                        )}\n                    >\n                        ›\n                    </button>\n                </>\n            )}\n        </div>\n    );\n}\n"],"mappings":"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","names":["_a"]}
+{"version":3,"sources":["../src/SwipeRow.tsx"],"sourcesContent":["'use client';\n\nimport React, { useEffect, useId, useMemo, useRef, useState } from 'react';\n\nexport type ShowControlsMode = 'auto' | 'always' | 'never';\n\nexport type SwipeRowClassNames = {\n    /** Outer wrapper around the scroller + controls */\n    root?: string;\n    /** The horizontal scroller element */\n    scroller?: string;\n    /** Wrapper around each item (the snap target) */\n    item?: string;\n    /** Shared class applied to both buttons */\n    controlButton?: string;\n    /** Prev button */\n    prevButton?: string;\n    /** Next button */\n    nextButton?: string;\n};\n\nexport type SwipeRowProps = {\n    /** Optional array of React nodes (alternative to children) */\n    items?: React.ReactNode[];\n    children?: React.ReactNode;\n\n    ariaLabel?: string;\n\n    /** Enable CSS scroll-snap */\n    snap?: boolean;\n\n    /** How far arrows / keyboard page (fraction of visible width) */\n    pageFactor?: number;\n\n    /** When to show left/right controls */\n    showControls?: ShowControlsMode;\n\n    /** Optional stable id for aria-controls */\n    id?: string;\n\n    /** Extra class on outer wrapper */\n    className?: string;\n\n    /**\n     * Spacing between items.\n     * This is a class hook (NOT Tailwind-specific). For non-Tailwind consumers,\n     * they'll typically use the provided default CSS and ignore this.\n     */\n    gapClassName?: string;\n\n    /** More granular class hooks */\n    classNames?: SwipeRowClassNames;\n\n    /**\n     * Optional inline style passthrough for the scroller.\n     * Useful for consumers that want scrollbarGutter, etc.\n     */\n    scrollerStyle?: React.CSSProperties;\n};\n\nfunction cx(...parts: Array<string | undefined | false | null>) {\n    return parts.filter(Boolean).join(' ');\n}\n\nexport default function SwipeRow({\n                                     items,\n                                     children,\n                                     ariaLabel = 'Scrollable content',\n                                     className,\n                                     gapClassName,\n                                     snap = true,\n                                     pageFactor = 0.9,\n                                     showControls = 'auto',\n                                     id,\n                                     classNames,\n                                     scrollerStyle,\n                                 }: SwipeRowProps) {\n    const scrollerRef = useRef<HTMLDivElement | null>(null);\n\n    const [canLeft, setCanLeft] = useState(false);\n    const [canRight, setCanRight] = useState(false);\n    const [controlsOn, setControlsOn] = useState(showControls === 'always');\n\n    const autoId = useId();\n    const regionId = id ?? autoId;\n\n    const content = useMemo(() => {\n        if (items) return items;\n        return React.Children.toArray(children);\n    }, [items, children]);\n\n    const hasCustomControls =\n        !!classNames?.controlButton || !!classNames?.prevButton || !!classNames?.nextButton;\n\n    // Enable/disable arrows based on scroll position\n    useEffect(() => {\n        const el = scrollerRef.current;\n        if (!el) return;\n\n        const update = () => {\n            // tolerance: helps avoid off-by-1 due to subpixel rounding\n            const max = el.scrollWidth - el.clientWidth - 1;\n            setCanLeft(el.scrollLeft > 0);\n            setCanRight(el.scrollLeft < max);\n        };\n\n        update();\n        el.addEventListener('scroll', update, { passive: true });\n        window.addEventListener('resize', update);\n\n        return () => {\n            el.removeEventListener('scroll', update);\n            window.removeEventListener('resize', update);\n        };\n    }, []);\n\n    // Decide when to show controls (desktop-ish)\n    useEffect(() => {\n        if (showControls !== 'auto') {\n            setControlsOn(showControls === 'always');\n            return;\n        }\n\n        const mq = window.matchMedia('(hover: hover) and (pointer: fine)');\n        const set = () => setControlsOn(mq.matches);\n\n        set();\n\n        // Safari fallback\n        if (mq.addEventListener) mq.addEventListener('change', set);\n        // eslint-disable-next-line deprecation/deprecation\n        else mq.addListener?.(set);\n\n        return () => {\n            if (mq.removeEventListener) mq.removeEventListener('change', set);\n            // eslint-disable-next-line deprecation/deprecation\n            else mq.removeListener?.(set);\n        };\n    }, [showControls]);\n\n    const page = (dir: -1 | 1) => {\n        const el = scrollerRef.current;\n        if (!el) return;\n        const step = Math.round(el.clientWidth * pageFactor);\n        el.scrollBy({ left: dir * step, behavior: 'smooth' });\n    };\n\n    // Keyboard paging (a11y)\n    const onKeyDown = (e: React.KeyboardEvent) => {\n        const el = scrollerRef.current;\n        if (!el) return;\n        const step = Math.round(el.clientWidth * pageFactor);\n\n        if (e.key === 'ArrowRight') {\n            e.preventDefault();\n            el.scrollBy({ left: step, behavior: 'smooth' });\n        }\n        if (e.key === 'ArrowLeft') {\n            e.preventDefault();\n            el.scrollBy({ left: -step, behavior: 'smooth' });\n        }\n    };\n\n    return (\n        <div className={cx('rsr-root', className, classNames?.root)}>\n            <div\n                ref={scrollerRef}\n                role=\"region\"\n                aria-label={ariaLabel}\n                tabIndex={0}\n                onKeyDown={onKeyDown}\n                className={cx(\n                    'rsr-scroller',\n                    snap && 'rsr-snap',\n                    gapClassName,\n                    classNames?.scroller\n                )}\n                style={{\n                    WebkitOverflowScrolling: 'touch',\n                    // matches your original (optional, but harmless)\n                    scrollbarGutter: 'stable both-edges',\n                    ...scrollerStyle,\n                }}\n                id={regionId}\n            >\n                {content.map((node, i) => (\n                    <div\n                        key={i}\n                        className={cx('rsr-item', snap && 'rsr-snap-item', classNames?.item)}\n                    >\n                        {node}\n                    </div>\n                ))}\n            </div>\n\n            {controlsOn && (\n                <>\n                    <button\n                        type=\"button\"\n                        onClick={() => page(-1)}\n                        disabled={!canLeft}\n                        aria-controls={regionId}\n                        aria-label=\"Scroll left\"\n                        className={cx(\n                            'rsr-control',\n                            hasCustomControls && 'rsr-control--custom',\n                            'rsr-prev',\n                            classNames?.controlButton,\n                            classNames?.prevButton\n                        )}\n                    >\n                        ‹\n                    </button>\n\n                    <button\n                        type=\"button\"\n                        onClick={() => page(1)}\n                        disabled={!canRight}\n                        aria-controls={regionId}\n                        aria-label=\"Scroll right\"\n                        className={cx(\n                            'rsr-control',\n                            hasCustomControls && 'rsr-control--custom',\n                            'rsr-next',\n                            classNames?.controlButton,\n                            classNames?.nextButton\n                        )}\n                    >\n                        ›\n                    </button>\n                </>\n            )}\n        </div>\n    );\n}\n"],"mappings":"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","names":["_a"]}

package/dist/style.css

@@ -21,6 +21,7 @@
 
     /* prevents parent page swipe-back stealing horizontal scroll */
     overscroll-behavior-x: contain;
+    scrollbar-width: none; /* Firefox */
 }
 
 /* Snap behavior */
@@ -36,39 +37,45 @@
     scroll-snap-align: start;
 }
 
-/* Controls (neutral default styling) */
+/* Always-on layout & behavior */
 .rsr-control {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
     z-index: 10;
-
     display: inline-flex;
     align-items: center;
     justify-content: center;
+    cursor: pointer;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+}
 
+/* Default visual skin (opt-out) */
+.rsr-control:not(.rsr-control--custom) {
     width: 36px;
     height: 36px;
     border-radius: 9999px;
-
     border: 1px solid rgba(0, 0, 0, 0.12);
     background: rgba(255, 255, 255, 0.9);
     color: rgba(0, 0, 0, 0.85);
-
-    cursor: pointer;
-    user-select: none;
-    -webkit-tap-highlight-color: transparent;
 }
 
-.rsr-control:hover {
+/* Default hover (opt-out) */
+.rsr-control:not(.rsr-control--custom):hover:not(:disabled) {
     background: rgba(255, 255, 255, 1);
 }
 
+/* Always-on disabled behavior */
 .rsr-control:disabled {
-    opacity: 0.45;
     cursor: default;
 }
 
+/* Default disabled visuals (opt-out) */
+.rsr-control:not(.rsr-control--custom):disabled {
+    opacity: 0.45;
+}
+
 .rsr-prev {
     left: 8px;
 }
@@ -77,10 +84,6 @@
     right: 8px;
 }
 
-/* Optional: hide scrollbar in browsers that support it */
-.rsr-scroller {
-    scrollbar-width: none; /* Firefox */
-}
 .rsr-scroller::-webkit-scrollbar {
     width: 0;
     height: 0;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goodmanlabs/react-swipe-row",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "author": "Glenn Goodman",
   "description": "A native-feeling horizontal scroll-snap card rail for React",
   "license": "MIT",