@jump-section/react 1.0.15 → 1.0.17
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 +38 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -72,6 +72,34 @@ function Content() {
|
|
|
72
72
|
}
|
|
73
73
|
```
|
|
74
74
|
|
|
75
|
+
### Using the `Section` component
|
|
76
|
+
|
|
77
|
+
You can use the `Section` component instead of manually calling `useScrollSection(id)` and attaching a ref:
|
|
78
|
+
|
|
79
|
+
```tsx
|
|
80
|
+
import { ScrollSectionProvider, Section, useScrollSection } from '@jump-section/react';
|
|
81
|
+
|
|
82
|
+
function App() {
|
|
83
|
+
return (
|
|
84
|
+
<ScrollSectionProvider offset={-80} behavior="smooth">
|
|
85
|
+
<Navigation />
|
|
86
|
+
<main>
|
|
87
|
+
<Section id="section-1">
|
|
88
|
+
<h2>Section 1</h2>
|
|
89
|
+
<p>Content for section 1...</p>
|
|
90
|
+
</Section>
|
|
91
|
+
<Section id="section-2">
|
|
92
|
+
<h2>Section 2</h2>
|
|
93
|
+
<p>Content for section 2...</p>
|
|
94
|
+
</Section>
|
|
95
|
+
</main>
|
|
96
|
+
</ScrollSectionProvider>
|
|
97
|
+
);
|
|
98
|
+
}
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
**Section props:** `id` (required), `as?: ElementType` (default: `'section'`), plus any HTML attributes.
|
|
102
|
+
|
|
75
103
|
### With Active State
|
|
76
104
|
|
|
77
105
|
```tsx
|
|
@@ -114,6 +142,16 @@ Hook for managing scroll sections.
|
|
|
114
142
|
- `activeId: string | null` - Currently active section ID
|
|
115
143
|
- `isActive: boolean` - Whether this section is currently active (only if sectionId provided)
|
|
116
144
|
|
|
145
|
+
### `Section`
|
|
146
|
+
|
|
147
|
+
Wrapper component that registers a scroll section without manually using `useScrollSection` and a ref.
|
|
148
|
+
|
|
149
|
+
**Props:**
|
|
150
|
+
|
|
151
|
+
- `id: string` - (Required) Unique section ID used for `scrollTo(id)` and active detection
|
|
152
|
+
- `as?: ElementType` - (Optional) HTML tag or component to render (default: `'section'`)
|
|
153
|
+
- Other HTML attributes (`className`, `style`, etc.) are forwarded to the root element
|
|
154
|
+
|
|
117
155
|
### `useScrollManager()`
|
|
118
156
|
|
|
119
157
|
Hook to access the underlying ScrollManager instance directly.
|