@goodmanlabs/react-swipe-row 0.1.0 → 0.1.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +69 -3
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -1,3 +1,7 @@
|
|
|
1
|
+
|
|
2
|
+
|
|
3
|
+
|
|
4
|
+
|
|
1
5
|
# react-swipe-row
|
|
2
6
|
|
|
3
7
|
A native-feeling horizontal “card rail” for React — momentum scrolling + scroll-snap alignment, with optional desktop paging controls.
|
|
@@ -16,8 +20,70 @@ This was built to solve a common UI problem: you want a horizontally scrollable
|
|
|
16
20
|
## Install
|
|
17
21
|
|
|
18
22
|
```bash
|
|
19
|
-
npm install react-swipe-row
|
|
23
|
+
npm install @goodmanlabs/react-swipe-row
|
|
20
24
|
# or
|
|
21
|
-
pnpm add react-swipe-row
|
|
25
|
+
pnpm add @goodmanlabs/react-swipe-row
|
|
22
26
|
# or
|
|
23
|
-
yarn add react-swipe-row
|
|
27
|
+
yarn add @goodmanlabs/react-swipe-row
|
|
28
|
+
```
|
|
29
|
+
|
|
30
|
+
## Usage
|
|
31
|
+
|
|
32
|
+
```tsx
|
|
33
|
+
import SwipeRow from '@goodmanlabs/react-swipe-row';
|
|
34
|
+
import '@goodmanlabs/react-swipe-row/style.css';
|
|
35
|
+
|
|
36
|
+
export default function Example() {
|
|
37
|
+
return (
|
|
38
|
+
<SwipeRow>
|
|
39
|
+
<div className="card">One</div>
|
|
40
|
+
<div className="card">Two</div>
|
|
41
|
+
<div className="card">Three</div>
|
|
42
|
+
</SwipeRow>
|
|
43
|
+
);
|
|
44
|
+
}
|
|
45
|
+
```
|
|
46
|
+
> Note: You must import the provided CSS for base layout and snapping behavior.
|
|
47
|
+
|
|
48
|
+
## Props
|
|
49
|
+
|
|
50
|
+
| Prop | Type | Default | Description |
|
|
51
|
+
|------|------|---------|-------------|
|
|
52
|
+
| `items` | `React.ReactNode[]` | — | Optional array of React nodes to render. If provided, it takes precedence over `children`. |
|
|
53
|
+
| `children` | `React.ReactNode` | — | Content to render if `items` is not provided. |
|
|
54
|
+
| `ariaLabel` | `string` | `"Scrollable content"` | Accessible label for the scroll region (`role="region"`). |
|
|
55
|
+
| `snap` | `boolean` | `true` | Enables/disables scroll-snap behavior (applies `rsr-snap` + `rsr-snap-item`). |
|
|
56
|
+
| `pageFactor` | `number` | `0.9` | How far the controls and keyboard paging move, as a fraction of the scroller’s `clientWidth`. |
|
|
57
|
+
| `showControls` | `"auto" \| "always" \| "never"` | `"auto"` | `auto` shows controls only on “desktop-like” pointers (`(hover: hover) and (pointer: fine)`), `always` forces them on, `never` hides them. |
|
|
58
|
+
| `id` | `string` | auto-generated | Optional stable id used for `aria-controls`. If omitted, a React `useId()` value is used. |
|
|
59
|
+
| `className` | `string` | — | Extra class(es) applied to the outer wrapper (`rsr-root`). |
|
|
60
|
+
| `gapClassName` | `string` | — | Optional spacing hook applied to the scroller (e.g. Tailwind `gap-*`, or any consumer-defined class). |
|
|
61
|
+
| `classNames` | `SwipeRowClassNames` | — | Optional granular class hooks for styling without targeting internals. |
|
|
62
|
+
| `scrollerStyle` | `React.CSSProperties` | — | Inline style passthrough for the scroller. Merged after defaults (so it can override). |
|
|
63
|
+
|
|
64
|
+
### `SwipeRowClassNames`
|
|
65
|
+
|
|
66
|
+
```ts
|
|
67
|
+
type SwipeRowClassNames = {
|
|
68
|
+
root?: string; // outer wrapper
|
|
69
|
+
scroller?: string; // the horizontal scroller element
|
|
70
|
+
item?: string; // wrapper around each item (snap target)
|
|
71
|
+
controlButton?: string; // shared class for both buttons
|
|
72
|
+
prevButton?: string; // prev button
|
|
73
|
+
nextButton?: string; // next button
|
|
74
|
+
};
|
|
75
|
+
```
|
|
76
|
+
|
|
77
|
+
## Accessibility & Behavior
|
|
78
|
+
|
|
79
|
+
- The scroll container is keyboard-focusable and supports left/right arrow key paging.
|
|
80
|
+
- Paging controls use semantic `<button>` elements with accessible labels.
|
|
81
|
+
- Scroll behavior relies on native browser momentum scrolling and `scroll-snap`, not JavaScript-driven carousels.
|
|
82
|
+
- On touch-first devices, paging controls are hidden by default to avoid interfering with native gestures.
|
|
83
|
+
|
|
84
|
+
## License
|
|
85
|
+
|
|
86
|
+
MIT © Glenn Goodman
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
|