morphing-scroll 1.5.21 → 2.0.0
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 +526 -552
- package/index.js +1 -1
- package/package.json +2 -2
- package/types/index.d.ts +111 -0
- package/types/intersectionTracker.d.ts +119 -0
- package/types/morphScroll.d.ts +435 -0
- package/types/resizeTracker.d.ts +77 -0
- package/index.d.ts +0 -333
package/README.md
CHANGED
|
@@ -1,25 +1,31 @@
|
|
|
1
|
-
|
|
2
2
|
|
|
3
3
|
<h2></h2>
|
|
4
4
|
|
|
5
|
-
###
|
|
5
|
+
### 〈 Table of contents 〉
|
|
6
6
|
|
|
7
7
|
- [About](#-about-)
|
|
8
8
|
- [Installation](#-installation-)
|
|
9
|
-
- [
|
|
10
|
-
- [ResizeTracker](#-resizetracker-)
|
|
11
|
-
- [IntersectionTracker](#-intersectiontracker-)
|
|
9
|
+
- [Components](#-components-)
|
|
12
10
|
- [API](#-api-)
|
|
13
11
|
|
|
14
12
|
<h2></h2>
|
|
15
13
|
|
|
16
|
-
###
|
|
14
|
+
### 〈 About 〉
|
|
17
15
|
|
|
18
|
-
`morphing-scroll` is a `React`
|
|
16
|
+
`morphing-scroll` is a `React` is a React library originally created to address common limitations of the native browser scrollbar, including:
|
|
17
|
+
|
|
18
|
+
- Design customization constraints
|
|
19
|
+
- Cross-browser compatibility
|
|
20
|
+
- Lack of horizontal scrolling support via mouse wheel
|
|
21
|
+
|
|
22
|
+
Over time, the library evolved to include numerous optimizations for handling large lists, significantly improving performance and flexibility.
|
|
23
|
+
|
|
24
|
+
All features are described below through the available components and their corresponding props.
|
|
19
25
|
|
|
20
26
|
<h2></h2>
|
|
21
27
|
|
|
22
|
-
###
|
|
28
|
+
### 〈 Installation 〉
|
|
23
29
|
|
|
24
30
|
To install the library, use the following command:
|
|
25
31
|
|
|
@@ -29,879 +35,843 @@ npm install morphing-scroll
|
|
|
29
35
|
|
|
30
36
|
<h2></h2>
|
|
31
37
|
|
|
32
|
-
###
|
|
38
|
+
### 〈 Components 〉
|
|
39
|
+
|
|
40
|
+
#### ♦ MorphScroll
|
|
33
41
|
|
|
34
42
|
`MorphScroll` is the main component of the library responsible for displaying your data.
|
|
35
43
|
|
|
36
|
-
-
|
|
44
|
+
- #### Props:
|
|
37
45
|
|
|
38
46
|
<div>
|
|
39
47
|
|
|
40
|
-
|
|
48
|
+
##### **GENERAL SETTINGS**:
|
|
41
49
|
|
|
42
50
|
<details>
|
|
43
|
-
<summary><
|
|
51
|
+
<summary><b><code>className</code></b>: <em>Additional classes.</em></summary><br />
|
|
44
52
|
<ul>
|
|
45
|
-
<
|
|
53
|
+
<b>Type:</b> string<br />
|
|
46
54
|
<br />
|
|
47
|
-
<
|
|
48
|
-
This parameter allows you to
|
|
55
|
+
<b>Description:</b> <em><br />
|
|
56
|
+
This parameter allows you to add additional classes to the component.</em><br />
|
|
49
57
|
<br />
|
|
50
|
-
<
|
|
58
|
+
<b>Example:</b>
|
|
51
59
|
|
|
52
60
|
```tsx
|
|
53
|
-
<MorphScroll
|
|
54
|
-
className="
|
|
55
|
-
// another props
|
|
61
|
+
<MorphScroll {...props}
|
|
62
|
+
className="custom-class"
|
|
56
63
|
>
|
|
57
64
|
{children}
|
|
58
65
|
</MorphScroll>
|
|
59
66
|
```
|
|
60
67
|
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
</details>
|
|
68
|
+
</ul></details>
|
|
64
69
|
|
|
65
70
|
<h2></h2>
|
|
66
71
|
|
|
67
72
|
<details>
|
|
68
|
-
<summary><
|
|
73
|
+
<summary><b><code>children</code></b>: <em>Custom user content.</em></summary><br />
|
|
69
74
|
<ul>
|
|
70
|
-
<
|
|
75
|
+
<b>Type:</b> React.ReactNode<br />
|
|
71
76
|
<br />
|
|
72
|
-
<
|
|
77
|
+
<b>Description:</b> <em><br />
|
|
73
78
|
This is where you can pass your list elements.<br />
|
|
74
79
|
Make sure to provide unique keys for each list item, as per React's rules. The <code>MorphScroll</code> component ensures that the cells it generates will use the same keys as your list items, allowing it to render the correct cells for the current list.<br />
|
|
75
|
-
Additionally, <code>MorphScroll</code> handles a passed <
|
|
80
|
+
Additionally, <code>MorphScroll</code> handles a passed <mark>null</mark> value the same way as <mark>undefined</mark>, rendering nothing in both cases.</em><br />
|
|
76
81
|
<br />
|
|
77
|
-
<
|
|
82
|
+
<b>Example:</b>
|
|
78
83
|
|
|
79
84
|
```tsx
|
|
80
|
-
<MorphScroll
|
|
81
|
-
// props
|
|
82
|
-
>
|
|
85
|
+
<MorphScroll {...props} >
|
|
83
86
|
{children}
|
|
84
87
|
</MorphScroll>
|
|
85
88
|
```
|
|
86
89
|
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
</details>
|
|
90
|
+
</ul></details>
|
|
90
91
|
|
|
91
92
|
<h2></h2>
|
|
92
93
|
|
|
93
|
-
|
|
94
|
+
##### **SCROLL SETTINGS**:
|
|
94
95
|
|
|
95
96
|
<details>
|
|
96
|
-
<summary><
|
|
97
|
+
<summary><b><code>type</code></b>: <em>Type of progress element.</em></summary><br />
|
|
97
98
|
<ul>
|
|
98
|
-
<
|
|
99
|
+
<b>Type:</b> "scroll" | "slider" | "sliderMenu"<br />
|
|
99
100
|
<br />
|
|
100
|
-
<
|
|
101
|
+
<b>Default:</b> "scroll"<br />
|
|
101
102
|
<br />
|
|
102
|
-
<
|
|
103
|
+
<b>Description:</b> <em><br />
|
|
103
104
|
This parameter defines how the provided <code>progressElement</code> behaves within <code>progressTrigger</code> and how you interact with it.<br />
|
|
104
|
-
With the default <code>type="scroll"</code>, it functions as a typical scrollbar. However, with <code>type="slider"</code>, it displays distinct elements indicating the number of full scroll steps within the list.<br />
|
|
105
|
-
For More details, refer to <code>progressTrigger/progressElement</code>.</em><br />
|
|
106
105
|
<br />
|
|
107
|
-
<
|
|
106
|
+
<mark>scroll</mark> - This is the default value and represents a standard scrollbar.<br />
|
|
107
|
+
<br />
|
|
108
|
+
<mark>slider</mark> - It displays distinct elements indicating the number of full scroll steps within the list.<br />
|
|
109
|
+
<br />
|
|
110
|
+
<mark>sliderMenu</mark> - It behaves like a <code>slider</code>, but now the <code>progressElement</code> is a menu, an you can provide custom buttons as an array in the <code>progressElement</code>.</em><br />
|
|
111
|
+
<br />
|
|
112
|
+
<b>Example:</b>
|
|
108
113
|
|
|
109
114
|
```tsx
|
|
110
|
-
<MorphScroll
|
|
115
|
+
<MorphScroll {...props}
|
|
111
116
|
type="slider"
|
|
112
|
-
// another props
|
|
113
117
|
>
|
|
114
118
|
{children}
|
|
115
119
|
</MorphScroll>
|
|
116
120
|
```
|
|
117
121
|
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
</details>
|
|
122
|
+
</ul></details>
|
|
121
123
|
|
|
122
124
|
<h2></h2>
|
|
123
125
|
|
|
124
126
|
<details>
|
|
125
|
-
<summary><
|
|
127
|
+
<summary><b><code>direction</code></b>: <em>Scrolling direction.</em></summary><br />
|
|
126
128
|
<ul>
|
|
127
|
-
<
|
|
129
|
+
<b>Type:</b> "x" | "y" | "hybrid"<br />
|
|
128
130
|
<br />
|
|
129
|
-
<
|
|
131
|
+
<b>Default:</b> "y"<br />
|
|
130
132
|
<br />
|
|
131
|
-
<
|
|
133
|
+
<b>Description:</b> <em><br />
|
|
132
134
|
This parameter changes the scroll or slider type direction based on the provided value.<br />
|
|
133
|
-
You can set
|
|
135
|
+
You can set the value to horizontal, vertical or hybrid positions to customize the component according to your needs.</em><br />
|
|
134
136
|
<br />
|
|
135
|
-
<
|
|
137
|
+
<b>Example:</b>
|
|
136
138
|
|
|
137
139
|
```tsx
|
|
138
|
-
<MorphScroll
|
|
140
|
+
<MorphScroll {...props}
|
|
139
141
|
direction="x"
|
|
140
|
-
// another props
|
|
141
142
|
>
|
|
142
143
|
{children}
|
|
143
144
|
</MorphScroll>
|
|
144
145
|
```
|
|
145
146
|
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
</details>
|
|
147
|
+
</ul></details>
|
|
149
148
|
|
|
150
149
|
<h2></h2>
|
|
151
150
|
|
|
152
151
|
<details>
|
|
153
|
-
<summary><
|
|
152
|
+
<summary><b><code>scrollPosition</code></b>: <em>Scroll position and additional options.</em></summary><br />
|
|
154
153
|
<ul>
|
|
155
|
-
<
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
154
|
+
<b>Type:</b> {<br />
|
|
155
|
+
value: number | "end" | (number | "end")[];<br />
|
|
156
|
+
duration?: number;<br />
|
|
157
|
+
updater?: boolean;<br />
|
|
159
158
|
}<br />
|
|
160
159
|
<br />
|
|
161
|
-
<
|
|
160
|
+
<b>Default:</b> { duration: 200; updater: false }<br />
|
|
162
161
|
<br />
|
|
163
|
-
<
|
|
162
|
+
<b>Description:</b> <em><br />
|
|
164
163
|
This parameter allows you to set custom scroll values.<br />
|
|
165
164
|
<br />
|
|
166
|
-
|
|
167
|
-
|
|
168
|
-
|
|
169
|
-
|
|
170
|
-
|
|
171
|
-
|
|
172
|
-
<code>setScroll((prev) => ({ ...prev, value: 0, updater: !prev.updater }))</code></em><br />
|
|
173
|
-
<br />
|
|
174
|
-
<strong>Example:</strong>
|
|
175
|
-
|
|
176
|
-
```tsx
|
|
177
|
-
<MorphScroll
|
|
178
|
-
scrollTop={{ value: 100; duration: 100 }}
|
|
179
|
-
// another props
|
|
180
|
-
>
|
|
181
|
-
{children}
|
|
182
|
-
</MorphScroll>
|
|
183
|
-
```
|
|
184
|
-
|
|
185
|
-
</ul>
|
|
186
|
-
|
|
187
|
-
</details>
|
|
188
|
-
|
|
189
|
-
<h2></h2>
|
|
190
|
-
|
|
191
|
-
<details>
|
|
192
|
-
<summary><strong><code>stopLoadOnScroll</code></strong>: <em>Stop loading when scrolling.</em></summary><br />
|
|
193
|
-
<ul>
|
|
194
|
-
<strong>Type:</strong> boolean<br />
|
|
165
|
+
<code>value</code>:<br />
|
|
166
|
+
<ul>
|
|
167
|
+
<li><mark>number</mark> - Sets the scroll position to a specific value.</li>
|
|
168
|
+
<li><mark>"end"</mark> - Scrolls to the bottom of the list upon loading, which is useful for scenarios like chat message lists. When new elements are appended to the list, the scroll position will update automatically. However, to prevent unwanted scrolling when adding elements to the beginning of the list, this property will not trigger.</li>
|
|
169
|
+
</ul>
|
|
170
|
+
You can also provide an array of two values to specific positions ( e.g., [ x, y ] axes ) for hybrid directions.</code>.<br />
|
|
195
171
|
<br />
|
|
196
|
-
<
|
|
172
|
+
<code>duration</code>:<br />
|
|
173
|
+
This property determines the animation speed for scrolling in <b>ms</b>.<br />
|
|
197
174
|
<br />
|
|
198
|
-
<
|
|
199
|
-
This
|
|
175
|
+
<code>updater</code>:<br />
|
|
176
|
+
This property is a helper for the <code>value</code> property. When setting the same scroll value repeatedly (e.g., clicking a button to scroll to the top), React does not register the update. To force an update, toggle updater within setState, e.g.,<br />
|
|
177
|
+
<code>setScroll((prev) => ({ ...prev, value: 0, updater: <b>!prev.updater</b> }))</code></em><br />
|
|
200
178
|
<br />
|
|
201
|
-
<
|
|
179
|
+
<b>Example:</b>
|
|
202
180
|
|
|
203
181
|
```tsx
|
|
204
|
-
<MorphScroll
|
|
205
|
-
|
|
206
|
-
// another props
|
|
182
|
+
<MorphScroll {...props}
|
|
183
|
+
scrollPosition={{ value: 100; duration: 100 }}
|
|
207
184
|
>
|
|
208
185
|
{children}
|
|
209
186
|
</MorphScroll>
|
|
210
187
|
```
|
|
211
188
|
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
</details>
|
|
189
|
+
</ul></details>
|
|
215
190
|
|
|
216
191
|
<h2></h2>
|
|
217
192
|
|
|
218
193
|
<details>
|
|
219
|
-
<summary><
|
|
194
|
+
<summary><b><code>onScrollValue</code></b>: <em>Callback for scroll value.</em></summary><br />
|
|
220
195
|
<ul>
|
|
221
|
-
<
|
|
196
|
+
<b>Type:</b> ( left: number, top: number ) => void<br />
|
|
222
197
|
<br />
|
|
223
|
-
<
|
|
224
|
-
This parameter accepts a callback function that is triggered on every scroll event. The callback receives the current scroll position as a number. The return value of the callback can be used to determine custom behavior based on the scroll value.</em><br />
|
|
198
|
+
<b>Description:</b> <em><br />
|
|
199
|
+
This parameter accepts a callback function that is triggered on every scroll event. The callback receives the current scroll top and left position as a number. The return value of the callback can be used to determine custom behavior based on the scroll value.</em><br />
|
|
225
200
|
<br />
|
|
226
|
-
<
|
|
201
|
+
<b>Example:</b>
|
|
227
202
|
|
|
228
203
|
```tsx
|
|
229
|
-
<MorphScroll
|
|
204
|
+
<MorphScroll {...props}
|
|
230
205
|
onScrollValue={
|
|
231
|
-
(
|
|
232
|
-
console.log("Scroll position:", scroll);
|
|
233
|
-
return scroll > 100;
|
|
234
|
-
},
|
|
206
|
+
(left, top) => console.log("Scroll position:", left, top),
|
|
235
207
|
}
|
|
236
|
-
// another props
|
|
237
208
|
>
|
|
238
209
|
{children}
|
|
239
210
|
</MorphScroll>
|
|
240
211
|
```
|
|
241
212
|
|
|
242
|
-
|
|
243
|
-
|
|
244
|
-
</details>
|
|
213
|
+
</ul></details>
|
|
245
214
|
|
|
246
215
|
<h2></h2>
|
|
247
216
|
|
|
248
217
|
<details>
|
|
249
|
-
<summary><
|
|
218
|
+
<summary><b><code>isScrolling</code></b>: <em>Callback function for scroll status.</em></summary><br />
|
|
250
219
|
<ul>
|
|
251
|
-
<
|
|
220
|
+
<b>Type:</b> ( motion: boolean ) => void<br />
|
|
252
221
|
<br />
|
|
253
|
-
<
|
|
222
|
+
<b>Description:</b> <em><br />
|
|
254
223
|
This parameter accepts a callback function that is triggered whenever the scroll status changes. The callback receives a boolean value, where <code>true</code> indicates that scrolling is in progress, and <code>false</code> indicates that scrolling has stopped. This can be useful for triggering additional actions, such as pausing animations or loading indicators based on the scroll state.</em><br />
|
|
255
224
|
<br />
|
|
256
|
-
<
|
|
225
|
+
<b>Example:</b>
|
|
257
226
|
|
|
258
227
|
```tsx
|
|
259
|
-
<MorphScroll
|
|
228
|
+
<MorphScroll {...props}
|
|
260
229
|
isScrolling={(motion) => {
|
|
261
230
|
console.log(motion ? "Scrolling..." : "Scroll stopped.");
|
|
262
231
|
}}
|
|
263
|
-
// another props
|
|
264
232
|
>
|
|
265
233
|
{children}
|
|
266
234
|
</MorphScroll>
|
|
267
235
|
```
|
|
268
236
|
|
|
269
|
-
|
|
270
|
-
|
|
271
|
-
</details>
|
|
237
|
+
</ul></details>
|
|
272
238
|
|
|
273
239
|
<h2></h2>
|
|
274
240
|
|
|
275
|
-
|
|
241
|
+
##### **VISUAL SETTINGS**:
|
|
276
242
|
|
|
277
243
|
<details>
|
|
278
|
-
<summary><
|
|
244
|
+
<summary><b><code>size</code> REQUIRED</b>: <em>[width, height] dimension of <b>MorphScroll</b>.</em></summary><br />
|
|
279
245
|
<ul>
|
|
280
|
-
<
|
|
246
|
+
<b>Type:</b><br /> number | number[] | "auto"<br />
|
|
281
247
|
<br />
|
|
282
|
-
<
|
|
283
|
-
This parameter sets the width and height of the <code>MorphScroll</code
|
|
248
|
+
<b>Description:</b> <em><br />
|
|
249
|
+
This parameter sets the width and height of the <code>MorphScroll</code>.<br />
|
|
284
250
|
<br />
|
|
285
|
-
|
|
251
|
+
<mark>number</mark> - Sets a fixed size in pixels. It can be 1 number if you want to set the same width and height, or an array of 2 numbers.<br />
|
|
286
252
|
<br />
|
|
287
|
-
|
|
288
|
-
<ul>
|
|
289
|
-
<li>The values are specified following the <code>width/height</code> rule in pixels, regardless of the <code>direction</code>.</li>
|
|
290
|
-
<li>See the <code>ResizeTracker</code> section for more details.</li>
|
|
291
|
-
</ul></em><br />
|
|
253
|
+
<mark>"auto"</mark> - Adds the <code>ResizeTracker</code> component to measure the width and height of the area where <code>MorphScroll</code> is added. The dimensions will automatically adjust when the container changes.</em><br />
|
|
292
254
|
<br />
|
|
293
|
-
<
|
|
255
|
+
<b>Example:</b>
|
|
294
256
|
|
|
295
257
|
```tsx
|
|
296
|
-
<MorphScroll
|
|
258
|
+
<MorphScroll {...props}
|
|
297
259
|
size={[100, 400]}
|
|
298
|
-
// another props
|
|
299
260
|
>
|
|
300
261
|
{children}
|
|
301
262
|
</MorphScroll>
|
|
302
263
|
```
|
|
303
264
|
|
|
304
|
-
|
|
305
|
-
|
|
306
|
-
</details>
|
|
265
|
+
</ul></details>
|
|
307
266
|
|
|
308
267
|
<h2></h2>
|
|
309
268
|
|
|
310
269
|
<details>
|
|
311
|
-
<summary><
|
|
270
|
+
<summary><b><code>objectsSize</code></b>: <em>[width, height] dimension of cells for each object.</em></summary><br />
|
|
312
271
|
<ul>
|
|
313
|
-
<
|
|
272
|
+
<b>Type:</b><br />
|
|
273
|
+
number | "firstChild"<br />
|
|
274
|
+
| (number | "none" | "firstChild")[]<br />
|
|
314
275
|
<br />
|
|
315
|
-
<
|
|
316
|
-
This parameter is the only required one. It defines the size of cells for each of your objects. <code>ObjectsSize</code> use an array of values.<br />
|
|
276
|
+
<b>Default:</b> If you don't provide any value, the default value will be taken from <code>size</code><br />
|
|
317
277
|
<br />
|
|
318
|
-
|
|
278
|
+
<b>Description:</b> <em><br />
|
|
279
|
+
This parameter defines the [width, height] of cells for each of your objects.<br />
|
|
319
280
|
<br />
|
|
320
|
-
|
|
281
|
+
<mark>number</mark> - Sets a fixed size for your custom objects.<br />
|
|
321
282
|
<br />
|
|
322
|
-
|
|
323
|
-
The numbers are specified following the <code>width/height</code> rule, regardless of the <code>direction</code>.</em><br />
|
|
283
|
+
<mark>"none"</mark> - Cells will still be created, but <code>MorphScroll</code> will not calculate their sizes-they will simply wrap your objects.<br />
|
|
324
284
|
<br />
|
|
325
|
-
<
|
|
285
|
+
<mark>"firstChild"</mark> - Creates a <code>ResizeTracker</code> wrapper for the first child of your list. This wrapper will calculate the size of the first child, and these dimensions will be applied to all cells in the list.<br />
|
|
286
|
+
<br />
|
|
287
|
+
✦ Note:<br />
|
|
288
|
+
<ul>
|
|
289
|
+
<li>All types except "none" can be used as 1 value, or an array of 2 values.</li>
|
|
290
|
+
<li><mark>"none"</mark> is not compatible with <code>render={{ type: "virtual" }}</code>.</li>
|
|
291
|
+
</ul></em><br />
|
|
292
|
+
<br />
|
|
293
|
+
<b>Example:</b>
|
|
326
294
|
|
|
327
295
|
```tsx
|
|
328
|
-
<MorphScroll
|
|
329
|
-
objectsSize={[
|
|
330
|
-
// objectsSize={["none", "none"]}
|
|
331
|
-
// objectsSize={["firstChild", "firstChild"]}
|
|
332
|
-
// another props
|
|
296
|
+
<MorphScroll {...props}
|
|
297
|
+
objectsSize={[80, 80]}
|
|
333
298
|
>
|
|
334
299
|
{children}
|
|
335
300
|
</MorphScroll>
|
|
336
301
|
```
|
|
337
302
|
|
|
338
|
-
|
|
339
|
-
|
|
340
|
-
</details>
|
|
303
|
+
</ul></details>
|
|
341
304
|
|
|
342
305
|
<h2></h2>
|
|
343
306
|
|
|
344
307
|
<details>
|
|
345
|
-
<summary><
|
|
308
|
+
<summary><b><code>crossCount</code></b>: <em>Number of cells in each direction.</em></summary><br />
|
|
346
309
|
<ul>
|
|
347
|
-
<
|
|
310
|
+
<b>Type:</b> number<br />
|
|
348
311
|
<br />
|
|
349
|
-
<
|
|
350
|
-
This parameter
|
|
312
|
+
<b>Description:</b> <em><br />
|
|
313
|
+
This parameter defines the number of <b>columns</b> (<code>direction="y"</code>, <code>direction="hybrid"</code> + <code>elementsDirection="column"</code>) or <b>rows</b> (<code>direction="x"</code>, <code>direction="hybrid"</code> + <code>elementsDirection="row"</code>).<br />
|
|
351
314
|
<br />
|
|
352
|
-
|
|
353
|
-
|
|
315
|
+
✦ Note:<br />
|
|
316
|
+
<ul>
|
|
317
|
+
<li>If you use <mark>"x"</mark> or <mark>"y"</mark> for the <code>direction</code> parameter, <code>crossCount</code> only limits the <b>maximum</b> number of columns or rows.</li>
|
|
318
|
+
<li>If you use <mark>"hybrid"</mark> for the <code>direction</code> parameter, <code>crossCount</code> defines the <b>exact</b> number of columns or rows in dependence of the <code>elementsDirection</code>, but not exceeding the total number of passed elements.</li>
|
|
319
|
+
</ul></em><br />
|
|
354
320
|
<br />
|
|
355
|
-
<
|
|
321
|
+
<b>Example:</b>
|
|
356
322
|
|
|
357
323
|
```tsx
|
|
358
|
-
<MorphScroll
|
|
359
|
-
|
|
360
|
-
// gap={[10, 10]}
|
|
361
|
-
// another props
|
|
324
|
+
<MorphScroll {...props}
|
|
325
|
+
crossCount={3}
|
|
362
326
|
>
|
|
363
327
|
{children}
|
|
364
328
|
</MorphScroll>
|
|
365
329
|
```
|
|
366
330
|
|
|
367
|
-
|
|
368
|
-
|
|
369
|
-
</details>
|
|
331
|
+
</ul></details>
|
|
370
332
|
|
|
371
333
|
<h2></h2>
|
|
372
334
|
|
|
373
335
|
<details>
|
|
374
|
-
<summary><
|
|
336
|
+
<summary><b><code>gap</code></b>: <em>Gap between cells.</em></summary><br />
|
|
375
337
|
<ul>
|
|
376
|
-
<
|
|
338
|
+
<b>Type:</b> number | number[]<br />
|
|
377
339
|
<br />
|
|
378
|
-
<
|
|
379
|
-
This parameter
|
|
340
|
+
<b>Description:</b> <em><br />
|
|
341
|
+
This parameter allows you to set spacing in pixels between list items both horizontally and vertically.<br />
|
|
380
342
|
<br />
|
|
381
|
-
|
|
382
|
-
|
|
383
|
-
<li>
|
|
384
|
-
This parameter accepts either a single number or an array of numbers
|
|
385
|
-
<ul>
|
|
386
|
-
<li>If a two-number array is provided, the values follow the <code>horizontal/vertical</code> rule.</li>
|
|
387
|
-
<li>If a four-number array is provided, the values follow the <code>top/right/bottom/left</code> rule.</li>
|
|
388
|
-
</ul>
|
|
389
|
-
</li>
|
|
390
|
-
<li>All values are in pixels and apply regardless of the <code>direction</code>.</li>
|
|
391
|
-
<li>This is not a CSS property, even though its name might suggest otherwise. It specifically refers to modifying the width and height of the scrollable wrapper, affecting the dimensions of the scrollable area.</li>
|
|
392
|
-
</ul></em><br />
|
|
343
|
+
✦ Note:<br />
|
|
344
|
+
It can be 1 number or an array of 2 or 4 numbers.</em><br />
|
|
393
345
|
<br />
|
|
394
|
-
<
|
|
346
|
+
<b>Example:</b>
|
|
395
347
|
|
|
396
348
|
```tsx
|
|
397
|
-
<MorphScroll
|
|
398
|
-
|
|
399
|
-
// padding={[10, 10]}
|
|
400
|
-
// padding={[10, 10, 10, 10]}
|
|
401
|
-
// another props
|
|
349
|
+
<MorphScroll {...props}
|
|
350
|
+
gap={10}
|
|
402
351
|
>
|
|
403
352
|
{children}
|
|
404
353
|
</MorphScroll>
|
|
405
354
|
```
|
|
406
355
|
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
</details>
|
|
356
|
+
</ul></details>
|
|
410
357
|
|
|
411
358
|
<h2></h2>
|
|
412
359
|
|
|
413
360
|
<details>
|
|
414
|
-
<summary><
|
|
361
|
+
<summary><b><code>wrapperMargin</code></b>: <em>Margin for the <b>.ms-objects-wrapper</b>.</em></summary><br />
|
|
415
362
|
<ul>
|
|
416
|
-
<
|
|
417
|
-
"start" | "center" | "end",<br />
|
|
418
|
-
"start" | "center" | "end"<br />
|
|
419
|
-
]<br />
|
|
420
|
-
<strong>Description:</strong> <em><br />
|
|
421
|
-
This parameter aligns the `objectsWrapper`, which contains all the provided elements, relative to the scroll or the `size`.<br />
|
|
422
|
-
<br />
|
|
423
|
-
⚠ Note:<br />
|
|
424
|
-
<ul>
|
|
425
|
-
<li>Only takes effect when `objectsWrapper` is smaller than the scroll container.
|
|
426
|
-
</li>
|
|
427
|
-
<li>The values are specified following the horizontal/vertical rule, regardless of the direction.
|
|
428
|
-
</li>
|
|
429
|
-
</ul></em><br />
|
|
363
|
+
<b>Type:</b> number | number[]<br />
|
|
430
364
|
<br />
|
|
431
|
-
<
|
|
365
|
+
<b>Description:</b> <em><br />
|
|
366
|
+
This parameter defines the spacing between the list items and their wrapper, effectively increasing the width or height of the scrollable area.<br />
|
|
367
|
+
<br />
|
|
368
|
+
✦ Note:<br />
|
|
369
|
+
Can be 1 number or an array of 2 or 4 numbers in pixels.</em><br />
|
|
370
|
+
<br />
|
|
371
|
+
<b>Example:</b>
|
|
432
372
|
|
|
433
373
|
```tsx
|
|
434
|
-
<MorphScroll
|
|
435
|
-
|
|
436
|
-
// another props
|
|
374
|
+
<MorphScroll {...props}
|
|
375
|
+
wrapperMargin={10}
|
|
437
376
|
>
|
|
438
377
|
{children}
|
|
439
378
|
</MorphScroll>
|
|
440
379
|
```
|
|
441
380
|
|
|
442
|
-
|
|
443
|
-
|
|
444
|
-
</details>
|
|
381
|
+
</ul></details>
|
|
445
382
|
|
|
446
383
|
<h2></h2>
|
|
447
384
|
|
|
448
385
|
<details>
|
|
449
|
-
<summary><
|
|
386
|
+
<summary><b><code>wrapperMinSize</code></b>: <em>Minimum height or width of the <b>.ms-objects-wrapper</b>.</em></summary><br />
|
|
450
387
|
<ul>
|
|
451
|
-
<
|
|
388
|
+
<b>Type:</b> number | "full" | (number | "full")[]<br /><br />
|
|
389
|
+
<b>Description:</b> <em><br />
|
|
390
|
+
This parameter defines the minimum height or width of the <b>.ms-objects-wrapper</b>, to which CSS properties like <code>min-height</code> or <code>min-width</code> will be applied.<br />
|
|
452
391
|
<br />
|
|
453
|
-
|
|
392
|
+
✦ Note:<br />
|
|
393
|
+
Can be used as 1 value, or an array of 2 values.</em><br />
|
|
394
|
+
<br />
|
|
395
|
+
<b>Example:</b>
|
|
454
396
|
|
|
455
397
|
```tsx
|
|
456
|
-
<MorphScroll
|
|
457
|
-
|
|
458
|
-
// another props
|
|
398
|
+
<MorphScroll {...props}
|
|
399
|
+
wrapperMinSize={"full"}
|
|
459
400
|
>
|
|
460
401
|
{children}
|
|
461
402
|
</MorphScroll>
|
|
462
403
|
```
|
|
463
404
|
|
|
464
|
-
|
|
465
|
-
|
|
466
|
-
</details>
|
|
405
|
+
</ul></details>
|
|
467
406
|
|
|
468
407
|
<h2></h2>
|
|
469
408
|
|
|
470
409
|
<details>
|
|
471
|
-
<summary><
|
|
410
|
+
<summary><b><code>wrapperAlign</code></b>: <em>[horizontal, vertical] aligns your content when it is smaller than the <code>size</code>.</em></summary><br />
|
|
472
411
|
<ul>
|
|
473
|
-
<
|
|
412
|
+
<b>Type:</b><br />
|
|
413
|
+
"start" | "center" | "end"<br />
|
|
414
|
+
| ("start" | "center" | "end")[]<br />
|
|
474
415
|
<br />
|
|
475
|
-
<
|
|
416
|
+
<b>Description:</b> <em><br />
|
|
417
|
+
This parameter aligns the <b>.ms-objects-wrapper</b>, which contains all the provided elements, relative to the scroll or the <code>size</code>.<br />
|
|
476
418
|
<br />
|
|
477
|
-
|
|
478
|
-
|
|
479
|
-
<br />
|
|
480
|
-
The color property accepts any valid color format. If specified, the library will generate a gradient transitioning from the custom color to transparent. If omitted, the edge elements will have no color, allowing for custom styling via CSS classes.<br />
|
|
481
|
-
<br />
|
|
482
|
-
⚠ Note:<br />
|
|
483
|
-
The size property, measured in pixels, adjusts the dimensions of the edge elements.</em><br />
|
|
419
|
+
✦ Note:<br />
|
|
420
|
+
Use 1 value to align one or both axes, or an array of 2 values to align both axes.</em><br />
|
|
484
421
|
<br />
|
|
485
|
-
<
|
|
422
|
+
<b>Example:</b>
|
|
486
423
|
|
|
487
424
|
```tsx
|
|
488
|
-
<MorphScroll
|
|
489
|
-
|
|
490
|
-
// edgeGradient={{ color: "rgba(0, 0, 0, 0.5)", size: 20 }}
|
|
491
|
-
// edgeGradient
|
|
492
|
-
// another props
|
|
425
|
+
<MorphScroll {...props}
|
|
426
|
+
contentAlign={["center", "center"]}
|
|
493
427
|
>
|
|
494
428
|
{children}
|
|
495
429
|
</MorphScroll>
|
|
496
430
|
```
|
|
497
431
|
|
|
498
|
-
|
|
499
|
-
|
|
500
|
-
</details>
|
|
432
|
+
</ul></details>
|
|
501
433
|
|
|
502
434
|
<h2></h2>
|
|
503
435
|
|
|
504
436
|
<details>
|
|
505
|
-
<summary><
|
|
437
|
+
<summary><b><code>elementsAlign</code></b>: <em>Aligns the objects inside <code>MorphScroll</code>.</em></summary><br />
|
|
506
438
|
<ul>
|
|
507
|
-
<
|
|
508
|
-
<br />
|
|
509
|
-
<strong>Default:</strong> false<br />
|
|
439
|
+
<b>Type:</b> "start" | "center" | "end"<br />
|
|
510
440
|
<br />
|
|
511
|
-
<
|
|
512
|
-
This parameter changes the position of the progress bar based on the direction property.<br />
|
|
513
|
-
<ul>
|
|
514
|
-
<li>If <code>direction="x"</code>, the progress bar is on the left by default and moves to the right when <code>progressReverse</code> is enabled.</li>
|
|
515
|
-
<li>If <code>direction="y"</code>, the progress bar is at the top by default and moves to the bottom when <code>progressReverse</code> is enabled.</li>
|
|
516
|
-
</ul></em><br />
|
|
517
|
-
<br />
|
|
518
|
-
<strong>Example:</strong>
|
|
441
|
+
<b>Example:</b>
|
|
519
442
|
|
|
520
443
|
```tsx
|
|
521
|
-
<MorphScroll
|
|
522
|
-
|
|
523
|
-
// another props
|
|
444
|
+
<MorphScroll {...props}
|
|
445
|
+
elementsAlign="center"
|
|
524
446
|
>
|
|
525
447
|
{children}
|
|
526
448
|
</MorphScroll>
|
|
527
449
|
```
|
|
528
450
|
|
|
529
|
-
|
|
530
|
-
|
|
531
|
-
</details>
|
|
451
|
+
</ul></details>
|
|
532
452
|
|
|
533
453
|
<h2></h2>
|
|
534
454
|
|
|
535
455
|
<details>
|
|
536
|
-
<summary><
|
|
456
|
+
<summary><b><code>elementsDirection</code></b>: <em>Direction of the provided elements.</em></summary><br />
|
|
537
457
|
<ul>
|
|
538
|
-
<
|
|
458
|
+
<b>Type:</b> "row" | "column"<br />
|
|
539
459
|
<br />
|
|
540
|
-
<
|
|
460
|
+
<b>Default:</b> "row"<br />
|
|
541
461
|
<br />
|
|
542
|
-
<
|
|
543
|
-
This parameter
|
|
462
|
+
<b>Description:</b> <em><br />
|
|
463
|
+
This parameter changes the order of the provided elements based on the provided value.</em><br />
|
|
544
464
|
<br />
|
|
545
|
-
<
|
|
465
|
+
<b>Example:</b>
|
|
546
466
|
|
|
547
467
|
```tsx
|
|
548
|
-
<MorphScroll
|
|
549
|
-
|
|
550
|
-
// another props
|
|
468
|
+
<MorphScroll {...props}
|
|
469
|
+
elementsDirection="column"
|
|
551
470
|
>
|
|
552
471
|
{children}
|
|
553
472
|
</MorphScroll>
|
|
554
473
|
```
|
|
555
474
|
|
|
556
|
-
|
|
557
|
-
|
|
558
|
-
</details>
|
|
475
|
+
</ul></details>
|
|
559
476
|
|
|
560
477
|
<h2></h2>
|
|
561
478
|
|
|
562
479
|
<details>
|
|
563
|
-
<summary><
|
|
480
|
+
<summary><b><code>edgeGradient</code></b>: <em>Gradient overlay at the edges of the scroll area.</em></summary><br />
|
|
564
481
|
<ul>
|
|
565
|
-
<
|
|
566
|
-
<
|
|
567
|
-
<
|
|
568
|
-
|
|
482
|
+
<b>Type:</b> boolean | { color?: string; size?: number }<br />
|
|
483
|
+
<br />
|
|
484
|
+
<b>Default:</b> { size: 40 }<br />
|
|
485
|
+
<br />
|
|
486
|
+
<b>Description:</b> <em><br />
|
|
487
|
+
This parameter creates two edge elements responsible for darkening the edges of the scroll when it overflows.<br />
|
|
488
|
+
<br />
|
|
489
|
+
<code>color</code> :<br />
|
|
490
|
+
The property accepts any valid color format.
|
|
491
|
+
If you provide it, the library will generate a gradient transitioning from the custom color to transparent.
|
|
492
|
+
If you provide just <mark>true</mark>, the edge elements will have no color, allowing for custom styling via CSS classes.<br />
|
|
569
493
|
<br />
|
|
570
|
-
<
|
|
494
|
+
<code>size</code> :<br />
|
|
495
|
+
The property changes the height for horizontal and width for vertical <b>.ms-edge</b>.</em><br />
|
|
496
|
+
<br />
|
|
497
|
+
<b>Example:</b>
|
|
571
498
|
|
|
572
499
|
```tsx
|
|
573
|
-
<MorphScroll
|
|
574
|
-
|
|
575
|
-
// another props
|
|
500
|
+
<MorphScroll {...props}
|
|
501
|
+
edgeGradient={{ color: "rgba(0, 0, 0, 0.5)", size: 60 }}
|
|
576
502
|
>
|
|
577
503
|
{children}
|
|
578
504
|
</MorphScroll>
|
|
579
505
|
```
|
|
580
506
|
|
|
581
|
-
|
|
582
|
-
|
|
583
|
-
</details>
|
|
507
|
+
</ul></details>
|
|
584
508
|
|
|
585
509
|
<h2></h2>
|
|
586
510
|
|
|
587
|
-
|
|
511
|
+
##### **PROGRESSBAR**:
|
|
588
512
|
|
|
589
513
|
<details>
|
|
590
|
-
<summary><
|
|
514
|
+
<summary><b><code>progressTrigger</code></b>: <em>Triggers for the scroll progress.</em></summary><br />
|
|
591
515
|
<ul>
|
|
592
|
-
<
|
|
516
|
+
<b>Type:</b> {<br />
|
|
593
517
|
wheel?: boolean;<br />
|
|
594
518
|
content?: boolean;<br />
|
|
595
|
-
progressElement?: boolean | React.ReactNode;<br />
|
|
519
|
+
progressElement?: boolean | React.ReactNode | React.ReactNode[];<br />
|
|
596
520
|
arrows?: boolean | { size?: number; element?: React.ReactNode };<br />
|
|
597
521
|
}<br />
|
|
598
522
|
<br />
|
|
599
|
-
<
|
|
523
|
+
<b>Default:</b> { wheel: true }<br />
|
|
524
|
+
<br />
|
|
525
|
+
<b>Description:</b> <em><br />
|
|
526
|
+
This is one of the most important properties, allowing you to define how users interact with the progress bar and customize its appearance.<br />
|
|
527
|
+
<br />
|
|
528
|
+
<code>wheel</code> :<br />
|
|
529
|
+
This parameter determines whether the progress bar responds to mouse wheel scrolling.<br />
|
|
600
530
|
<br />
|
|
601
|
-
<
|
|
602
|
-
This
|
|
531
|
+
<code>content</code> :<br />
|
|
532
|
+
This parameter enables interaction by clicking and dragging anywhere within the scrollable content to move it.<br />
|
|
533
|
+
<br />
|
|
534
|
+
<code>progressElement</code> :<br />
|
|
535
|
+
This parameter determines how the scroll progress is managed.<br />
|
|
603
536
|
<br />
|
|
604
537
|
<ul>
|
|
605
|
-
<li>
|
|
606
|
-
<li>
|
|
607
|
-
<li>
|
|
608
|
-
|
|
609
|
-
</ul></em><br />
|
|
538
|
+
<li>When using <code>type="scroll"</code>, you can provide a custom scroll element. If it's not ready yet, simply set <mark>true</mark> instead — this will fall back to the browser’s default scrollbar.</li>
|
|
539
|
+
<li>When using <code>type="slider"</code>, a <b>.ms-slider</b> element is automatically generated. It contains multiple <b>sliderElem</b> elements that visually represent the scroll progress. One of them will always have the <code>active</code> class depending on the current position.</li>
|
|
540
|
+
<li>When using <code>type="sliderMenu"</code>, everything is the same as with <mark>"slider"</mark> but you can pass an array of custom buttons to <code>progressElement</code>. These buttons act as a navigation menu, allowing users to jump to specific sections.</li>
|
|
541
|
+
</ul>
|
|
610
542
|
<br />
|
|
611
|
-
<
|
|
543
|
+
<code>arrows</code> :<br />
|
|
544
|
+
This parameter allows you to add custom arrows to the progress bar. You can either specify a <code>size</code> for the arrows and provide a custom element.<br />
|
|
545
|
+
<br />
|
|
546
|
+
✦ Note:<br />
|
|
547
|
+
<code>progressTrigger</code> can only create or provide your elements, but you must make the design for them yourself.</em><br />
|
|
548
|
+
<br />
|
|
549
|
+
<b>Example:</b>
|
|
612
550
|
|
|
613
551
|
```tsx
|
|
614
|
-
<MorphScroll
|
|
552
|
+
<MorphScroll {...props}
|
|
615
553
|
progressTrigger={{
|
|
616
554
|
wheel: true,
|
|
617
555
|
progressElement: <div className="your-scroll-thumb" />,
|
|
618
556
|
}}
|
|
619
|
-
// another props
|
|
620
557
|
>
|
|
621
558
|
{children}
|
|
622
559
|
</MorphScroll>
|
|
623
560
|
```
|
|
624
561
|
|
|
625
|
-
|
|
626
|
-
|
|
627
|
-
</details>
|
|
562
|
+
</ul></details>
|
|
628
563
|
|
|
629
564
|
<h2></h2>
|
|
630
565
|
|
|
631
566
|
<details>
|
|
632
|
-
<summary><
|
|
567
|
+
<summary><b><code>progressReverse</code></b>: <em>Reverse the progress bar position.</em></summary><br />
|
|
633
568
|
<ul>
|
|
634
|
-
<
|
|
635
|
-
| { type: "default" }<br />
|
|
636
|
-
| { type: "lazy"; rootMargin?: number | number[]; onVisible?: (key: string) => void }<br />
|
|
637
|
-
| { type: "virtual"; rootMargin?: number | number[] }<br />
|
|
569
|
+
<b>Type:</b> boolean | boolean[]<br />
|
|
638
570
|
<br />
|
|
639
|
-
<
|
|
571
|
+
<b>Default:</b> false<br />
|
|
640
572
|
<br />
|
|
641
|
-
<
|
|
642
|
-
This parameter
|
|
573
|
+
<b>Description:</b> <em><br />
|
|
574
|
+
This parameter changes the position of the progress bar based on the direction property.<br />
|
|
643
575
|
<br />
|
|
644
576
|
<ul>
|
|
645
|
-
<li>
|
|
646
|
-
<li>
|
|
647
|
-
<li>
|
|
648
|
-
</ul><br />
|
|
577
|
+
<li>If <code>direction="x"</code>, the progress bar appears on the left by default and moves to the right when set to <mark>true</mark>.</li>
|
|
578
|
+
<li>If <code>direction="y"</code>, the progress bar appears at the bottom by default and moves to the top when set to <mark>true</mark>.</li>
|
|
579
|
+
<li>If <code>direction="hybrid"</code>, both horizontal and vertical progress bars are used with the same logic as above. And in this case, you can also pass an array of booleans to control each bar individually.</li>
|
|
580
|
+
</ul></em><br />
|
|
581
|
+
<br />
|
|
582
|
+
<b>Example:</b>
|
|
583
|
+
|
|
584
|
+
```tsx
|
|
585
|
+
<MorphScroll {...props}
|
|
586
|
+
progressReverse
|
|
587
|
+
>
|
|
588
|
+
{children}
|
|
589
|
+
</MorphScroll>
|
|
590
|
+
```
|
|
591
|
+
|
|
592
|
+
</ul></details>
|
|
593
|
+
|
|
594
|
+
<h2></h2>
|
|
595
|
+
|
|
596
|
+
<details>
|
|
597
|
+
<summary><b><code>scrollBarOnHover</code></b>: <em>Hover visibility of the <b>progress bar</b>.</em></summary><br />
|
|
598
|
+
<ul>
|
|
599
|
+
<b>Type:</b> boolean<br />
|
|
600
|
+
<br />
|
|
601
|
+
<b>Default:</b> false<br />
|
|
602
|
+
<br />
|
|
603
|
+
<b>Description:</b> <em><br />
|
|
604
|
+
This parameter controls the visibility of the progress bar regardless of the <code>type</code> value.<br />
|
|
605
|
+
When you use it, the <b>"hover"</b> class is applied to the <b>.ms-bar</b> when the cursor is over it (or the finger touches it on touchscreens), and <b>"leave"</b> is applied when it is no longer hovered. This allows you to easily customize its appearance on interaction.</em><br />
|
|
606
|
+
<br />
|
|
607
|
+
<b>Example:</b>
|
|
608
|
+
|
|
609
|
+
```tsx
|
|
610
|
+
<MorphScroll {...props}
|
|
611
|
+
scrollBarOnHover
|
|
612
|
+
>
|
|
613
|
+
{children}
|
|
614
|
+
</MorphScroll>
|
|
615
|
+
```
|
|
616
|
+
|
|
617
|
+
</ul></details>
|
|
618
|
+
|
|
619
|
+
<h2></h2>
|
|
620
|
+
|
|
621
|
+
##### **OPTIMIZATIONS**:
|
|
622
|
+
|
|
623
|
+
<details>
|
|
624
|
+
<summary><b><code>render</code></b>: <em>Rendering strategy for performance optimization.</em></summary><br />
|
|
625
|
+
<ul>
|
|
626
|
+
<b>Type:</b> {<br />
|
|
627
|
+
type: "lazy" | "virtual";<br />
|
|
628
|
+
rootMargin?: number | number[];<br />
|
|
629
|
+
stopLoadOnScroll?: boolean;<br />
|
|
630
|
+
}<br />
|
|
649
631
|
<br />
|
|
650
|
-
|
|
632
|
+
<b>Description:</b> <em><br />
|
|
633
|
+
This parameter adds a gradual rendering of the content as it enters the viewport.<br />
|
|
634
|
+
When used, a container is created for each scrollable object, and its absolute positioning is calculated based on scroll position and area dimensions.<br />
|
|
635
|
+
<br />
|
|
636
|
+
<code>type</code>:<br />
|
|
651
637
|
<ul>
|
|
652
|
-
<li>
|
|
653
|
-
<li>
|
|
654
|
-
|
|
655
|
-
<ul>
|
|
656
|
-
<li>If a two-number array is provided, the values follow the <code>horizontal/vertical</code> rule.</li>
|
|
657
|
-
<li>If a four-number array is provided, the values follow the <code>top/right/bottom/left</code> rule.</li>
|
|
658
|
-
</ul>
|
|
659
|
-
</li>
|
|
660
|
-
<li>All values are in pixels and apply regardless of the <code>direction</code>.</li>
|
|
661
|
-
</ul></em><br />
|
|
638
|
+
<li>With <mark>"lazy"</mark>, content is not deleted when it leaves the viewport.</li>
|
|
639
|
+
<li>With <mark>"virtual"</mark>, content is deleted when it leaves the viewport.</li>
|
|
640
|
+
</ul>
|
|
662
641
|
<br />
|
|
663
|
-
<
|
|
642
|
+
<code>rootMargin</code>:<br />
|
|
643
|
+
This property controls the threshold for loading content. It can be a single number or an array of 2 <b>[ top-bottom, left-right ]</b> or 4 <b>[ top, right, bottom, left ]</b> numbers. It is the distance for loading from the root element ( <b>.ms-element</b> ) in pixels.<br />
|
|
644
|
+
<br />
|
|
645
|
+
<code>stopLoadOnScroll</code>:<br />
|
|
646
|
+
This property controls whether to stop loading content when scrolling.<br />
|
|
647
|
+
<br />
|
|
648
|
+
✦ Note:<br />
|
|
649
|
+
<code>render</code> is not compatible with <code>objectsSize: "none"</code>.</em><br />
|
|
650
|
+
<br />
|
|
651
|
+
<b>Example:</b>
|
|
664
652
|
|
|
665
653
|
```tsx
|
|
666
|
-
<MorphScroll
|
|
654
|
+
<MorphScroll {...props}
|
|
667
655
|
render={{ type: "virtual" }}
|
|
668
|
-
// render={{
|
|
669
|
-
// type: "lazy",
|
|
670
|
-
// rootMargin: [0, 100],
|
|
671
|
-
// onVisible: () => console.log("visible"))
|
|
672
|
-
// }}
|
|
673
|
-
// another props
|
|
674
656
|
>
|
|
675
657
|
{children}
|
|
676
658
|
</MorphScroll>
|
|
677
659
|
```
|
|
678
660
|
|
|
679
|
-
|
|
680
|
-
|
|
681
|
-
</details>
|
|
661
|
+
</ul></details>
|
|
682
662
|
|
|
683
663
|
<h2></h2>
|
|
684
664
|
|
|
685
665
|
<details>
|
|
686
|
-
<summary><
|
|
666
|
+
<summary><b><code>emptyElements</code></b>: <em>Handling of empty scroll elements.</em></summary><br />
|
|
687
667
|
<ul>
|
|
688
|
-
<
|
|
689
|
-
|
|
690
|
-
|
|
691
|
-
|
|
692
|
-
|
|
693
|
-
|
|
694
|
-
|
|
695
|
-
element?: React.ReactNode;
|
|
696
|
-
clickTrigger?: { selector: string; delay?: number };
|
|
697
|
-
}<br /><br />
|
|
698
|
-
<strong>Description:</strong> <em><br />
|
|
699
|
-
If certain components might return nothing during rendering, this parameter helps manage them. The check and subsequent replacement with a fallback element or removal occur after the scroll elements are rendered. Due to this, when dynamically displaying elements in different <code>render</code> modes, you may notice slight position shifts during fast scrolling, as empty elements are removed, causing subsequent elements to reposition.<br />
|
|
668
|
+
<b>Type:</b> {<br />
|
|
669
|
+
mode: "clear" | "fallback" | { fallback: React.ReactNode };<br />
|
|
670
|
+
clickTrigger?: { selector: string; delay?: number };<br />
|
|
671
|
+
}<br />
|
|
672
|
+
<br />
|
|
673
|
+
<b>Description:</b> <em><br />
|
|
674
|
+
This option will allow you to delete or replace empty list items during the first rendering, or to start this process by clicking.<br />
|
|
700
675
|
<br />
|
|
676
|
+
<code>mode</code> :<br />
|
|
701
677
|
<ul>
|
|
702
|
-
<li><
|
|
703
|
-
<li><
|
|
704
|
-
|
|
678
|
+
<li><mark>"clear"</mark> – automatically removes empty elements.</li>
|
|
679
|
+
<li><mark>"fallback"</mark> – replaces empty elements with the value from the <code>fallback</code> props.</li>
|
|
680
|
+
<li><mark>{ fallback: React.ReactNode }</mark> – if you need a different element than in <code>fallback</code> to replace empty elements, you can use this option.</li>
|
|
681
|
+
</ul>
|
|
705
682
|
<br />
|
|
706
|
-
<code>clickTrigger</code>
|
|
683
|
+
<code>clickTrigger</code> :<br />
|
|
684
|
+
In case if elements are removed via a click action, use this option. It accepts an object with a <code>selector</code> ( such as a delete button’s class ) and <code>delay</code> ( in <b>ms</b> ) to wait before removing the elements.<br />
|
|
707
685
|
<br />
|
|
708
|
-
|
|
709
|
-
|
|
686
|
+
✦ Note:<br />
|
|
687
|
+
<ul>
|
|
688
|
+
<li>The cleanup will start on the initial render, when the number of passed elements changes, on scroll and on click if you use <code>clickTrigger</code>.</li>
|
|
689
|
+
<li>If you are using <code>clickTrigger</code> but there are no changes, you may need to increase the <code>delay</code> value, since the cleanup function is triggered when your item has not yet been deleted.</li>
|
|
690
|
+
</ul></em>
|
|
710
691
|
<br />
|
|
711
|
-
<
|
|
692
|
+
<b>Example:</b>
|
|
712
693
|
|
|
713
694
|
```tsx
|
|
714
|
-
<MorphScroll
|
|
695
|
+
<MorphScroll {...props}
|
|
715
696
|
emptyElements={{
|
|
716
697
|
mode: "clear",
|
|
717
698
|
clickTrigger: { selector: ".close-button" },
|
|
718
699
|
}}
|
|
719
|
-
// emptyElements={{
|
|
720
|
-
// mode: "fallback",
|
|
721
|
-
// clickTrigger: {
|
|
722
|
-
// selector: ".close-button",
|
|
723
|
-
// delay: 100,
|
|
724
|
-
// },
|
|
725
|
-
// }}
|
|
726
|
-
// another props
|
|
727
700
|
>
|
|
728
701
|
{children}
|
|
729
702
|
</MorphScroll>
|
|
730
703
|
```
|
|
731
704
|
|
|
732
|
-
|
|
733
|
-
|
|
734
|
-
</details>
|
|
705
|
+
</ul></details>
|
|
735
706
|
|
|
736
707
|
<h2></h2>
|
|
737
708
|
|
|
738
709
|
<details>
|
|
739
|
-
<summary><
|
|
710
|
+
<summary><b><code>suspending</code></b>: <em>Adds React Suspense.</em></summary><br />
|
|
740
711
|
<ul>
|
|
741
|
-
<
|
|
712
|
+
<b>Type:</b> boolean<br />
|
|
742
713
|
<br />
|
|
743
|
-
<
|
|
714
|
+
<b>Default:</b> false<br />
|
|
744
715
|
<br />
|
|
745
|
-
<
|
|
716
|
+
<b>Description:</b> <em><br />
|
|
746
717
|
This parameter adds React Suspense to the MorphScroll component for asynchronous rendering.</em><br />
|
|
747
718
|
<br />
|
|
748
|
-
<
|
|
719
|
+
<b>Example:</b>
|
|
749
720
|
|
|
750
721
|
```tsx
|
|
751
|
-
<MorphScroll
|
|
722
|
+
<MorphScroll {...props}
|
|
752
723
|
suspending
|
|
753
|
-
// another props
|
|
754
724
|
>
|
|
755
725
|
{children}
|
|
756
726
|
</MorphScroll>
|
|
757
727
|
```
|
|
758
728
|
|
|
759
|
-
|
|
760
|
-
|
|
761
|
-
</details>
|
|
729
|
+
</ul></details>
|
|
762
730
|
|
|
763
731
|
<h2></h2>
|
|
764
732
|
|
|
765
733
|
<details>
|
|
766
|
-
<summary><
|
|
734
|
+
<summary><b><code>fallback</code></b>: <em>Fallback element.</em></summary><br />
|
|
767
735
|
<ul>
|
|
768
|
-
<
|
|
736
|
+
<b>Type:</b> React.ReactNode<br />
|
|
769
737
|
<br />
|
|
770
|
-
<
|
|
771
|
-
This parameter sets the fallback element
|
|
738
|
+
<b>Description:</b> <em><br />
|
|
739
|
+
This parameter sets the fallback element to display during loading or placeholder.<br />
|
|
740
|
+
It will be used when:
|
|
741
|
+
<ul>
|
|
742
|
+
<li><code>suspending</code> is set to <mark>true</mark>.</li>
|
|
743
|
+
<li><code>render.stopLoadOnScroll</code> is set to <mark>true</mark>.</li>
|
|
744
|
+
<li><code>emptyElements.mode</code> is set to <mark>"fallback"</mark>.</li>
|
|
745
|
+
</ul></em><br />
|
|
772
746
|
<br />
|
|
773
|
-
<
|
|
747
|
+
<b>Example:</b>
|
|
774
748
|
|
|
775
749
|
```tsx
|
|
776
|
-
<MorphScroll
|
|
750
|
+
<MorphScroll {...props}
|
|
777
751
|
fallback={<div>Loading...</div>}
|
|
778
|
-
// another props
|
|
779
752
|
>
|
|
780
753
|
{children}
|
|
781
754
|
</MorphScroll>
|
|
782
755
|
```
|
|
783
756
|
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
</details>
|
|
757
|
+
</ul></details>
|
|
787
758
|
|
|
788
759
|
</div>
|
|
789
760
|
|
|
790
761
|
<h2></h2>
|
|
791
762
|
|
|
792
|
-
|
|
763
|
+
#### ♦ ResizeTracker
|
|
793
764
|
|
|
794
765
|
`ResizeTracker` is a React component that monitors changes to an element’s size. It provides updated dimensions via a render-prop function whenever the observed element is resized.
|
|
795
766
|
|
|
796
|
-
-
|
|
767
|
+
- #### Props:
|
|
797
768
|
|
|
798
769
|
<div>
|
|
799
770
|
|
|
800
771
|
<details>
|
|
801
|
-
<summary><
|
|
772
|
+
<summary><b><code>className</code></b>: <em>Additional classes.</em></summary><br />
|
|
802
773
|
<ul>
|
|
803
|
-
<
|
|
774
|
+
<b>Type:</b> string<br />
|
|
804
775
|
<br />
|
|
805
|
-
<
|
|
806
|
-
|
|
776
|
+
<b>Description:</b> <em><br />
|
|
777
|
+
This parameter allows you to add additional classes to the component.</em><br />
|
|
807
778
|
<br />
|
|
808
|
-
|
|
809
|
-
<ul>
|
|
810
|
-
<li><code>x</code> - The X-coordinate of the top-left corner of the element.</li>
|
|
811
|
-
<li><code>y</code> - The Y-coordinate of the top-left corner of the element.</li>
|
|
812
|
-
<li><code>width</code> - The width of the observed element’s content box.</li>
|
|
813
|
-
<li><code>height</code> - The height of the observed element’s content box.</li>
|
|
814
|
-
<li><code>top</code> - The distance from the top of the element to its parent's top. Equal to <code>y</code>.</li>
|
|
815
|
-
<li><code>left</code> - The distance from the left of the element to its parent's left. Equal to <code>x</code>.</li>
|
|
816
|
-
<li><code>right</code> - The distance from the left of the parent to the right edge of the element (<code>left</code> + <code>width</code>).</li>
|
|
817
|
-
<li><code>bottom</code> - The distance from the top of the parent to the bottom edge of the element (<code>top</code> + <code>height</code>).</li>
|
|
818
|
-
</ul><br />
|
|
819
|
-
<br />
|
|
820
|
-
⚠ This is a non-standard prop that you might be used to using this is render-prop function receiving the container's size.</em><br />
|
|
821
|
-
<br />
|
|
822
|
-
<strong>Example:</strong>
|
|
779
|
+
<b>Example:</b>
|
|
823
780
|
|
|
824
781
|
```tsx
|
|
825
782
|
<ResizeTracker
|
|
826
|
-
|
|
783
|
+
className="custom-class"
|
|
827
784
|
>
|
|
828
|
-
{
|
|
829
|
-
<p>
|
|
830
|
-
Width: {rect.width}, Height: {rect.height}
|
|
831
|
-
</p>
|
|
832
|
-
)}
|
|
785
|
+
{children}
|
|
833
786
|
</ResizeTracker>
|
|
834
787
|
```
|
|
835
788
|
|
|
836
|
-
|
|
837
|
-
|
|
838
|
-
</details>
|
|
789
|
+
</ul></details>
|
|
839
790
|
|
|
840
791
|
<h2></h2>
|
|
841
792
|
|
|
842
793
|
<details>
|
|
843
|
-
<summary><
|
|
794
|
+
<summary><b><code>children</code></b>: <em>Custom user content.</em></summary><br />
|
|
844
795
|
<ul>
|
|
845
|
-
<
|
|
796
|
+
<b>Type:</b> React.ReactNode<br />
|
|
797
|
+
<br />
|
|
798
|
+
<b>Description:</b> <em><br />
|
|
799
|
+
This parameter allows you to add custom content to the component.</em><br />
|
|
846
800
|
<br />
|
|
847
|
-
<
|
|
801
|
+
<b>Example:</b>
|
|
848
802
|
|
|
849
803
|
```tsx
|
|
850
|
-
<ResizeTracker
|
|
851
|
-
{
|
|
852
|
-
// content
|
|
853
|
-
)}
|
|
804
|
+
<ResizeTracker >
|
|
805
|
+
{children}
|
|
854
806
|
</ResizeTracker>
|
|
855
807
|
```
|
|
856
808
|
|
|
857
|
-
|
|
809
|
+
</ul></details>
|
|
810
|
+
|
|
811
|
+
<h2></h2>
|
|
858
812
|
|
|
859
|
-
|
|
813
|
+
<details>
|
|
814
|
+
<summary><b><code>style</code></b>: <em>Applies inline styles to the container.</em></summary><br />
|
|
815
|
+
<ul>
|
|
816
|
+
<b>Type:</b> React.CSSProperties<br />
|
|
817
|
+
<br />
|
|
818
|
+
<b>Example:</b>
|
|
819
|
+
|
|
820
|
+
```tsx
|
|
821
|
+
<ResizeTracker
|
|
822
|
+
style={{ backgroundColor: "yellow" }}
|
|
823
|
+
>
|
|
824
|
+
{children}
|
|
825
|
+
</ResizeTracker>
|
|
826
|
+
```
|
|
827
|
+
|
|
828
|
+
</ul></details>
|
|
860
829
|
|
|
861
830
|
<h2></h2>
|
|
862
831
|
|
|
863
832
|
<details>
|
|
864
|
-
<summary><
|
|
833
|
+
<summary><b><code>measure</code></b>: <em>Defines the measurement strategy.</em></summary><br />
|
|
865
834
|
<ul>
|
|
866
|
-
<
|
|
835
|
+
<b>Type:</b> "inner" | "outer" | "all"<br />
|
|
867
836
|
<br />
|
|
868
|
-
<
|
|
837
|
+
<b>Default:</b> "inner"<br />
|
|
869
838
|
<br />
|
|
870
|
-
<
|
|
839
|
+
<b>Description:</b><br />
|
|
871
840
|
<em>This prop determines what is being measured by automatically applying inline styles that affect width and height.<br />
|
|
872
841
|
<br />
|
|
873
|
-
|
|
874
|
-
|
|
875
|
-
|
|
842
|
+
<ul>
|
|
843
|
+
<li><mark>"inner"</mark> sets <code>width: "max-content"</code> and <code>height: "max-content"</code>, measuring the size of child elements.</li>
|
|
844
|
+
<li><mark>"outer"</mark> measures the parent element by setting <code>minWidth: "100%"</code> and <code>minHeight: "100%"</code>.</li>
|
|
845
|
+
<li><mark>"all"</mark> value combines the styles of both <code>"inner"</code> and <code>"outer"</code>, allowing measurement of both the parent and child elements.</li>
|
|
846
|
+
</ul>
|
|
876
847
|
<br />
|
|
877
|
-
|
|
848
|
+
✦ Note: <br />
|
|
849
|
+
Be cautious when overriding styles via the <code>style</code> prop, as it may interfere with the styles applied by <code>measure</code>, leading to unexpected behavior.</em><br />
|
|
878
850
|
<br />
|
|
879
|
-
<
|
|
851
|
+
<b>Example:</b>
|
|
880
852
|
|
|
881
853
|
```tsx
|
|
882
|
-
<ResizeTracker
|
|
883
|
-
|
|
884
|
-
|
|
885
|
-
|
|
854
|
+
<ResizeTracker
|
|
855
|
+
measure="all"
|
|
856
|
+
>
|
|
857
|
+
{children}
|
|
886
858
|
</ResizeTracker>
|
|
887
859
|
```
|
|
888
860
|
|
|
889
|
-
|
|
890
|
-
|
|
891
|
-
</details>
|
|
861
|
+
</ul></details>
|
|
892
862
|
|
|
893
863
|
<h2></h2>
|
|
894
864
|
|
|
895
865
|
<details>
|
|
896
|
-
<summary><
|
|
866
|
+
<summary><b><code>onResize</code></b>: <em>Callback triggered on size changes.</em></summary><br />
|
|
897
867
|
<ul>
|
|
898
|
-
<
|
|
868
|
+
<b>Type:</b> (rect: Partial<DOMRectReadOnly>) => void<br />
|
|
899
869
|
<br />
|
|
900
|
-
<
|
|
870
|
+
<b>Description:</b><br />
|
|
901
871
|
<em>A callback function that is triggered whenever the observed element's dimensions change.<br />
|
|
902
872
|
The function receives an object containing the updated size properties.</em><br />
|
|
903
873
|
<br />
|
|
904
|
-
<
|
|
874
|
+
<b>Example:</b>
|
|
905
875
|
|
|
906
876
|
```tsx
|
|
907
877
|
<ResizeTracker
|
|
@@ -909,232 +879,236 @@ npm install morphing-scroll
|
|
|
909
879
|
console.log("New size:", rect);
|
|
910
880
|
}}
|
|
911
881
|
>
|
|
912
|
-
{
|
|
913
|
-
// content
|
|
914
|
-
)}
|
|
882
|
+
{children}
|
|
915
883
|
</ResizeTracker>
|
|
916
884
|
```
|
|
917
885
|
|
|
918
|
-
|
|
919
|
-
|
|
920
|
-
</details>
|
|
886
|
+
</ul></details>
|
|
921
887
|
|
|
922
888
|
<h2></h2>
|
|
923
889
|
|
|
924
890
|
</div>
|
|
925
891
|
|
|
926
|
-
-
|
|
892
|
+
- #### Link:
|
|
927
893
|
|
|
928
894
|
[IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
|
|
929
895
|
|
|
930
896
|
<h2></h2>
|
|
931
897
|
|
|
932
|
-
|
|
898
|
+
#### ♦ IntersectionTracker
|
|
933
899
|
|
|
934
900
|
`IntersectionTracker` is a React component for tracking the intersection of an element with the viewport.
|
|
935
901
|
|
|
936
|
-
-
|
|
902
|
+
- #### Props:
|
|
937
903
|
|
|
938
904
|
<div>
|
|
939
905
|
|
|
940
906
|
<details>
|
|
941
|
-
<summary><
|
|
907
|
+
<summary><b><code>className</code></b>: <em>Additional classes.</em></summary><br />
|
|
942
908
|
<ul>
|
|
943
|
-
<
|
|
909
|
+
<b>Type:</b> string<br />
|
|
944
910
|
<br />
|
|
945
|
-
<
|
|
911
|
+
<b>Description:</b> <em><br />
|
|
912
|
+
This parameter allows you to add additional classes to the component.</em><br />
|
|
913
|
+
<br />
|
|
914
|
+
<b>Example:</b>
|
|
946
915
|
|
|
947
916
|
```tsx
|
|
948
|
-
<IntersectionTracker
|
|
917
|
+
<IntersectionTracker
|
|
918
|
+
className="custom-class"
|
|
919
|
+
>
|
|
920
|
+
{children}
|
|
921
|
+
</IntersectionTracker>
|
|
949
922
|
```
|
|
950
923
|
|
|
951
|
-
|
|
952
|
-
|
|
953
|
-
</details>
|
|
924
|
+
</ul></details>
|
|
954
925
|
|
|
955
926
|
<h2></h2>
|
|
956
927
|
|
|
957
928
|
<details>
|
|
958
|
-
<summary><
|
|
929
|
+
<summary><b><code>children</code></b>: <em>Custom user content.</em></summary><br />
|
|
959
930
|
<ul>
|
|
960
|
-
<
|
|
931
|
+
<b>Type:</b> React.ReactNode<br />
|
|
961
932
|
<br />
|
|
962
|
-
<
|
|
933
|
+
<b>Example:</b>
|
|
963
934
|
|
|
964
935
|
```tsx
|
|
965
|
-
<IntersectionTracker
|
|
936
|
+
<IntersectionTracker>
|
|
966
937
|
{children}
|
|
967
938
|
</IntersectionTracker>
|
|
968
939
|
```
|
|
969
940
|
|
|
970
|
-
|
|
941
|
+
</ul></details>
|
|
942
|
+
|
|
943
|
+
<h2></h2>
|
|
944
|
+
|
|
945
|
+
<details>
|
|
946
|
+
<summary><b><code>style</code></b>: <em>Applies inline styles to the container.</em></summary><br />
|
|
947
|
+
<ul>
|
|
948
|
+
<b>Type:</b> React.CSSProperties<br />
|
|
949
|
+
<br />
|
|
950
|
+
<b>Example:</b>
|
|
951
|
+
|
|
952
|
+
```tsx
|
|
953
|
+
<IntersectionTracker
|
|
954
|
+
style={{ backgroundColor: "yellow" }}
|
|
955
|
+
>
|
|
956
|
+
{children}
|
|
957
|
+
</IntersectionTracker>
|
|
958
|
+
```
|
|
971
959
|
|
|
972
|
-
</details>
|
|
960
|
+
</ul></details>
|
|
973
961
|
|
|
974
962
|
<h2></h2>
|
|
975
963
|
|
|
976
964
|
<details>
|
|
977
|
-
<summary><
|
|
965
|
+
<summary><b><code>root</code></b>: <em>Defines the observation area.</em></summary><br />
|
|
978
966
|
<ul>
|
|
979
|
-
<
|
|
967
|
+
<b>Type:</b> Element | null<br />
|
|
980
968
|
<br />
|
|
981
|
-
<
|
|
969
|
+
<b>Default:</b> null (window)<br />
|
|
982
970
|
<br />
|
|
983
|
-
<
|
|
971
|
+
<b>Description:</b> <em><br />
|
|
984
972
|
Specifies the element that serves as the bounding box for the intersection observation.
|
|
985
|
-
If provided, it must be an ancestor of the observed element
|
|
973
|
+
If provided, it must be an ancestor of the observed element.</em><br />
|
|
986
974
|
<br />
|
|
987
|
-
|
|
988
|
-
<br />
|
|
989
|
-
<strong>Example:</strong>
|
|
975
|
+
<b>Example:</b>
|
|
990
976
|
|
|
991
977
|
```tsx
|
|
992
|
-
<IntersectionTracker
|
|
978
|
+
<IntersectionTracker
|
|
979
|
+
root={document.getElementById("observer-container")}
|
|
980
|
+
>
|
|
993
981
|
{children}
|
|
994
982
|
</IntersectionTracker>
|
|
995
983
|
```
|
|
996
984
|
|
|
997
|
-
|
|
998
|
-
|
|
999
|
-
</details>
|
|
985
|
+
</ul></details>
|
|
1000
986
|
|
|
1001
987
|
<h2></h2>
|
|
1002
988
|
|
|
1003
989
|
<details>
|
|
1004
|
-
<summary><
|
|
990
|
+
<summary><b><code>rootMargin</code></b>: <em>Sets the margin around the root element.</em></summary><br />
|
|
1005
991
|
<ul>
|
|
1006
|
-
<
|
|
992
|
+
<b>Type:</b> number | number[]<br />
|
|
1007
993
|
<br />
|
|
1008
|
-
<
|
|
994
|
+
<b>Description:</b> <em><br />
|
|
1009
995
|
Defines an offset around the root element, expanding or shrinking the observed area.<br />
|
|
1010
996
|
<br />
|
|
1011
|
-
|
|
1012
|
-
<
|
|
1013
|
-
<li>A <strong>single number</strong> sets the same margin on all sides.</li>
|
|
1014
|
-
<li>A <strong>two-value array</strong> <code>[topBottom, leftRight]</code> applies margins vertically and horizontally.</li>
|
|
1015
|
-
<li>A <strong>four-value array</strong> <code>[top, right, bottom, left]</code> allows full control over each side.</li>
|
|
1016
|
-
</ul>
|
|
1017
|
-
<br />
|
|
1018
|
-
Margins are converted to <code>px</code> values internally.</em><br />
|
|
997
|
+
✦ Note:<br />
|
|
998
|
+
It can be a single number or an array of 2 <b>[ top-bottom, left-right ]</b> or 4 <b>[ top, right, bottom, left ]</b> numbers.</em><br />
|
|
1019
999
|
<br />
|
|
1020
|
-
<
|
|
1000
|
+
<b>Example:</b>
|
|
1021
1001
|
|
|
1022
1002
|
```tsx
|
|
1023
1003
|
<IntersectionTracker
|
|
1024
1004
|
rootMargin={10}
|
|
1025
|
-
// rootMargin={[10, 20]}
|
|
1026
|
-
// rootMargin={[10, 20, 10, 20]}
|
|
1027
1005
|
>
|
|
1028
1006
|
{children}
|
|
1029
1007
|
</IntersectionTracker>
|
|
1030
1008
|
```
|
|
1031
1009
|
|
|
1032
|
-
|
|
1033
|
-
|
|
1034
|
-
</details>
|
|
1010
|
+
</ul></details>
|
|
1035
1011
|
|
|
1036
1012
|
<h2></h2>
|
|
1037
1013
|
|
|
1038
1014
|
<details>
|
|
1039
|
-
<summary><
|
|
1015
|
+
<summary><b><code>threshold</code></b>: <em>Defines when the callback <code>onVisible</code> and content visibility should be triggered.</em></summary><br />
|
|
1040
1016
|
<ul>
|
|
1041
|
-
<
|
|
1017
|
+
<b>Type:</b> number | number[]<br />
|
|
1042
1018
|
<br />
|
|
1043
|
-
<
|
|
1044
|
-
|
|
1019
|
+
<b>Description:</b> <em><br />
|
|
1020
|
+
Specifies at what percentage of the observed element’s visibility the callback should be executed.<br />
|
|
1045
1021
|
<br />
|
|
1022
|
+
✦ Note:<br />
|
|
1046
1023
|
<ul>
|
|
1047
|
-
<li>A
|
|
1048
|
-
<li>
|
|
1049
|
-
</ul>
|
|
1024
|
+
<li>A value of <code>0</code> means the callback fires when any part of the element appears, while <code>1</code> means the element must be fully visible.</li>
|
|
1025
|
+
<li>An array (e.g., <code>[0, 0.5, 1]</code>) triggers the callback multiple times at different visibility levels.</li>
|
|
1026
|
+
</ul></em>
|
|
1050
1027
|
<br />
|
|
1051
|
-
|
|
1052
|
-
<br />
|
|
1053
|
-
<strong>Example:</strong>
|
|
1028
|
+
<b>Example:</b>
|
|
1054
1029
|
|
|
1055
1030
|
```tsx
|
|
1056
1031
|
<IntersectionTracker
|
|
1057
1032
|
threshold={0.5}
|
|
1058
|
-
// threshold={[0, 0.5, 1]}
|
|
1059
1033
|
>
|
|
1060
1034
|
{children}
|
|
1061
1035
|
</IntersectionTracker>
|
|
1062
1036
|
```
|
|
1063
1037
|
|
|
1064
|
-
|
|
1065
|
-
|
|
1066
|
-
</details>
|
|
1038
|
+
</ul></details>
|
|
1067
1039
|
|
|
1068
1040
|
<h2></h2>
|
|
1069
1041
|
|
|
1070
1042
|
<details>
|
|
1071
|
-
<summary><
|
|
1043
|
+
<summary><b><code>visibleContent</code></b>: <em>Makes all elements always visible.</em></summary><br />
|
|
1072
1044
|
<ul>
|
|
1073
|
-
<
|
|
1074
|
-
<br />
|
|
1075
|
-
<strong>Default:</strong> false<br />
|
|
1045
|
+
<b>Type:</b> boolean<br />
|
|
1076
1046
|
<br />
|
|
1077
|
-
<
|
|
1078
|
-
If set to `true`, the tracked elements will always be visible, regardless of their actual intersection status.
|
|
1047
|
+
<b>Default:</b> false<br />
|
|
1079
1048
|
<br />
|
|
1049
|
+
<b>Description:</b> <em><br />
|
|
1050
|
+
If set to <mark>true</mark>, the tracked elements will always be visible, regardless of their actual intersection status.<br />
|
|
1080
1051
|
This can be useful for testing purposes or when using the <code>onVisible</code> callback, ensuring it continues to trigger whenever the element enters the viewport.</em><br />
|
|
1081
1052
|
<br />
|
|
1082
|
-
<
|
|
1053
|
+
<b>Example:</b>
|
|
1083
1054
|
|
|
1084
1055
|
```tsx
|
|
1085
|
-
<IntersectionTracker
|
|
1056
|
+
<IntersectionTracker
|
|
1057
|
+
visibleContent
|
|
1058
|
+
>
|
|
1059
|
+
{children}
|
|
1060
|
+
</IntersectionTracker>
|
|
1086
1061
|
```
|
|
1087
1062
|
|
|
1088
|
-
|
|
1089
|
-
|
|
1090
|
-
</details>
|
|
1063
|
+
</ul></details>
|
|
1091
1064
|
|
|
1092
1065
|
<h2></h2>
|
|
1093
1066
|
|
|
1094
1067
|
<details>
|
|
1095
|
-
<summary><
|
|
1068
|
+
<summary><b><code>onVisible</code></b>: <em>Callback function triggered when the element becomes visible.</em></summary><br />
|
|
1096
1069
|
<ul>
|
|
1097
|
-
<
|
|
1070
|
+
<b>Type:</b> (entry: IntersectionObserverEntry) => void<br />
|
|
1098
1071
|
<br />
|
|
1099
|
-
<
|
|
1100
|
-
A callback function that is
|
|
1072
|
+
<b>Description:</b> <em><br />
|
|
1073
|
+
A callback function that is called when the observed element enters the viewport or the area defined by the <code>root</code> property. This can be used to load new list items for <code>MorphScroll</code>.<br />
|
|
1101
1074
|
<br />
|
|
1102
|
-
|
|
1103
|
-
|
|
1075
|
+
✦ Note:<br />
|
|
1076
|
+
The <code>IntersectionObserverEntry</code> object provides details about the intersection state, including:<br />
|
|
1077
|
+
<ul>
|
|
1078
|
+
<li><code>boundingClientRect</code>: The bounding rectangle of the element relative to the viewport.</li>
|
|
1079
|
+
<li><code>intersectionRatio</code>: The percentage of the element that is visible in the viewport.</li>
|
|
1080
|
+
<li><code>intersectionRect</code>: The intersection rectangle between the element and the viewport.</li>
|
|
1081
|
+
<li><code>rootBounds</code>: The bounding rectangle of the root element relative to the viewport.</li>
|
|
1082
|
+
<li><code>target</code>: The observed element.</li>
|
|
1083
|
+
<li><code>time</code>: The timestamp when the intersection state changed.</li>
|
|
1084
|
+
</ul>
|
|
1104
1085
|
<br />
|
|
1105
|
-
|
|
1106
|
-
Instead of checking if <code>key</code> equals the element’s key name, use <code>includes</code> for verification. React may modify key names by prefixing them with special characters like <code>.$</code>, making direct equality checks unreliable and more expensive 💵.</em><br />
|
|
1086
|
+
More information in the <b>Link</b> below.</em><br />
|
|
1107
1087
|
<br />
|
|
1108
|
-
<
|
|
1088
|
+
<b>Example:</b>
|
|
1109
1089
|
|
|
1110
1090
|
```tsx
|
|
1111
1091
|
<IntersectionTracker
|
|
1112
|
-
onVisible={(
|
|
1113
|
-
if (key.includes("elementId")) {
|
|
1114
|
-
// do something
|
|
1115
|
-
}
|
|
1116
|
-
}}
|
|
1092
|
+
onVisible={(entry) => console.log(entry)}
|
|
1117
1093
|
>
|
|
1118
1094
|
{children}
|
|
1119
1095
|
</IntersectionTracker>
|
|
1120
1096
|
```
|
|
1121
1097
|
|
|
1122
|
-
|
|
1123
|
-
|
|
1124
|
-
</details>
|
|
1098
|
+
</ul></details>
|
|
1125
1099
|
|
|
1126
1100
|
<h2></h2>
|
|
1127
1101
|
|
|
1128
1102
|
</div>
|
|
1129
1103
|
|
|
1130
|
-
-
|
|
1104
|
+
- #### Link:
|
|
1131
1105
|
|
|
1132
1106
|
[IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
|
|
1133
1107
|
|
|
1134
1108
|
<h2></h2>
|
|
1135
1109
|
|
|
1136
|
-
###
|
|
1110
|
+
### 〈 API 〉
|
|
1137
1111
|
|
|
1138
|
-
- `MorphScroll`:
|
|
1139
|
-
- `ResizeTracker`:
|
|
1140
|
-
- `IntersectionTracker`:
|
|
1112
|
+
- `MorphScroll`: Main component for custom list rendering.
|
|
1113
|
+
- `ResizeTracker`: Component for monitoring changes to an element’s size.
|
|
1114
|
+
- `IntersectionTracker`: Component for tracking element visibility in the viewport.
|