morphing-scroll 1.5.22 → 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 +495 -453
- 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,30 +35,31 @@ 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>
|
|
@@ -63,21 +70,19 @@ npm install morphing-scroll
|
|
|
63
70
|
<h2></h2>
|
|
64
71
|
|
|
65
72
|
<details>
|
|
66
|
-
<summary><
|
|
73
|
+
<summary><b><code>children</code></b>: <em>Custom user content.</em></summary><br />
|
|
67
74
|
<ul>
|
|
68
|
-
<
|
|
75
|
+
<b>Type:</b> React.ReactNode<br />
|
|
69
76
|
<br />
|
|
70
|
-
<
|
|
77
|
+
<b>Description:</b> <em><br />
|
|
71
78
|
This is where you can pass your list elements.<br />
|
|
72
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 />
|
|
73
|
-
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 />
|
|
74
81
|
<br />
|
|
75
|
-
<
|
|
82
|
+
<b>Example:</b>
|
|
76
83
|
|
|
77
84
|
```tsx
|
|
78
|
-
<MorphScroll
|
|
79
|
-
// props
|
|
80
|
-
>
|
|
85
|
+
<MorphScroll {...props} >
|
|
81
86
|
{children}
|
|
82
87
|
</MorphScroll>
|
|
83
88
|
```
|
|
@@ -86,26 +91,29 @@ npm install morphing-scroll
|
|
|
86
91
|
|
|
87
92
|
<h2></h2>
|
|
88
93
|
|
|
89
|
-
|
|
94
|
+
##### **SCROLL SETTINGS**:
|
|
90
95
|
|
|
91
96
|
<details>
|
|
92
|
-
<summary><
|
|
97
|
+
<summary><b><code>type</code></b>: <em>Type of progress element.</em></summary><br />
|
|
93
98
|
<ul>
|
|
94
|
-
<
|
|
99
|
+
<b>Type:</b> "scroll" | "slider" | "sliderMenu"<br />
|
|
95
100
|
<br />
|
|
96
|
-
<
|
|
101
|
+
<b>Default:</b> "scroll"<br />
|
|
97
102
|
<br />
|
|
98
|
-
<
|
|
103
|
+
<b>Description:</b> <em><br />
|
|
99
104
|
This parameter defines how the provided <code>progressElement</code> behaves within <code>progressTrigger</code> and how you interact with it.<br />
|
|
100
|
-
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 />
|
|
101
|
-
For More details, refer to <code>progressTrigger/progressElement</code>.</em><br />
|
|
102
105
|
<br />
|
|
103
|
-
<
|
|
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>
|
|
104
113
|
|
|
105
114
|
```tsx
|
|
106
|
-
<MorphScroll
|
|
115
|
+
<MorphScroll {...props}
|
|
107
116
|
type="slider"
|
|
108
|
-
// another props
|
|
109
117
|
>
|
|
110
118
|
{children}
|
|
111
119
|
</MorphScroll>
|
|
@@ -116,22 +124,21 @@ npm install morphing-scroll
|
|
|
116
124
|
<h2></h2>
|
|
117
125
|
|
|
118
126
|
<details>
|
|
119
|
-
<summary><
|
|
127
|
+
<summary><b><code>direction</code></b>: <em>Scrolling direction.</em></summary><br />
|
|
120
128
|
<ul>
|
|
121
|
-
<
|
|
129
|
+
<b>Type:</b> "x" | "y" | "hybrid"<br />
|
|
122
130
|
<br />
|
|
123
|
-
<
|
|
131
|
+
<b>Default:</b> "y"<br />
|
|
124
132
|
<br />
|
|
125
|
-
<
|
|
133
|
+
<b>Description:</b> <em><br />
|
|
126
134
|
This parameter changes the scroll or slider type direction based on the provided value.<br />
|
|
127
|
-
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 />
|
|
128
136
|
<br />
|
|
129
|
-
<
|
|
137
|
+
<b>Example:</b>
|
|
130
138
|
|
|
131
139
|
```tsx
|
|
132
|
-
<MorphScroll
|
|
140
|
+
<MorphScroll {...props}
|
|
133
141
|
direction="x"
|
|
134
|
-
// another props
|
|
135
142
|
>
|
|
136
143
|
{children}
|
|
137
144
|
</MorphScroll>
|
|
@@ -142,58 +149,38 @@ npm install morphing-scroll
|
|
|
142
149
|
<h2></h2>
|
|
143
150
|
|
|
144
151
|
<details>
|
|
145
|
-
<summary><
|
|
152
|
+
<summary><b><code>scrollPosition</code></b>: <em>Scroll position and additional options.</em></summary><br />
|
|
146
153
|
<ul>
|
|
147
|
-
<
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
154
|
+
<b>Type:</b> {<br />
|
|
155
|
+
value: number | "end" | (number | "end")[];<br />
|
|
156
|
+
duration?: number;<br />
|
|
157
|
+
updater?: boolean;<br />
|
|
151
158
|
}<br />
|
|
152
159
|
<br />
|
|
153
|
-
<
|
|
160
|
+
<b>Default:</b> { duration: 200; updater: false }<br />
|
|
154
161
|
<br />
|
|
155
|
-
<
|
|
162
|
+
<b>Description:</b> <em><br />
|
|
156
163
|
This parameter allows you to set custom scroll values.<br />
|
|
157
164
|
<br />
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
<code>setScroll((prev) => ({ ...prev, value: 0, updater: !prev.updater }))</code></em><br />
|
|
165
|
-
<br />
|
|
166
|
-
<strong>Example:</strong>
|
|
167
|
-
|
|
168
|
-
```tsx
|
|
169
|
-
<MorphScroll
|
|
170
|
-
scrollTop={{ value: 100; duration: 100 }}
|
|
171
|
-
// another props
|
|
172
|
-
>
|
|
173
|
-
{children}
|
|
174
|
-
</MorphScroll>
|
|
175
|
-
```
|
|
176
|
-
|
|
177
|
-
</ul></details>
|
|
178
|
-
|
|
179
|
-
<h2></h2>
|
|
180
|
-
|
|
181
|
-
<details>
|
|
182
|
-
<summary><strong><code>stopLoadOnScroll</code></strong>: <em>Stop loading when scrolling.</em></summary><br />
|
|
183
|
-
<ul>
|
|
184
|
-
<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 />
|
|
185
171
|
<br />
|
|
186
|
-
<
|
|
172
|
+
<code>duration</code>:<br />
|
|
173
|
+
This property determines the animation speed for scrolling in <b>ms</b>.<br />
|
|
187
174
|
<br />
|
|
188
|
-
<
|
|
189
|
-
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 />
|
|
190
178
|
<br />
|
|
191
|
-
<
|
|
179
|
+
<b>Example:</b>
|
|
192
180
|
|
|
193
181
|
```tsx
|
|
194
|
-
<MorphScroll
|
|
195
|
-
|
|
196
|
-
// another props
|
|
182
|
+
<MorphScroll {...props}
|
|
183
|
+
scrollPosition={{ value: 100; duration: 100 }}
|
|
197
184
|
>
|
|
198
185
|
{children}
|
|
199
186
|
</MorphScroll>
|
|
@@ -204,24 +191,20 @@ npm install morphing-scroll
|
|
|
204
191
|
<h2></h2>
|
|
205
192
|
|
|
206
193
|
<details>
|
|
207
|
-
<summary><
|
|
194
|
+
<summary><b><code>onScrollValue</code></b>: <em>Callback for scroll value.</em></summary><br />
|
|
208
195
|
<ul>
|
|
209
|
-
<
|
|
196
|
+
<b>Type:</b> ( left: number, top: number ) => void<br />
|
|
210
197
|
<br />
|
|
211
|
-
<
|
|
212
|
-
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 />
|
|
213
200
|
<br />
|
|
214
|
-
<
|
|
201
|
+
<b>Example:</b>
|
|
215
202
|
|
|
216
203
|
```tsx
|
|
217
|
-
<MorphScroll
|
|
204
|
+
<MorphScroll {...props}
|
|
218
205
|
onScrollValue={
|
|
219
|
-
(
|
|
220
|
-
console.log("Scroll position:", scroll);
|
|
221
|
-
return scroll > 100;
|
|
222
|
-
},
|
|
206
|
+
(left, top) => console.log("Scroll position:", left, top),
|
|
223
207
|
}
|
|
224
|
-
// another props
|
|
225
208
|
>
|
|
226
209
|
{children}
|
|
227
210
|
</MorphScroll>
|
|
@@ -232,21 +215,20 @@ npm install morphing-scroll
|
|
|
232
215
|
<h2></h2>
|
|
233
216
|
|
|
234
217
|
<details>
|
|
235
|
-
<summary><
|
|
218
|
+
<summary><b><code>isScrolling</code></b>: <em>Callback function for scroll status.</em></summary><br />
|
|
236
219
|
<ul>
|
|
237
|
-
<
|
|
220
|
+
<b>Type:</b> ( motion: boolean ) => void<br />
|
|
238
221
|
<br />
|
|
239
|
-
<
|
|
222
|
+
<b>Description:</b> <em><br />
|
|
240
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 />
|
|
241
224
|
<br />
|
|
242
|
-
<
|
|
225
|
+
<b>Example:</b>
|
|
243
226
|
|
|
244
227
|
```tsx
|
|
245
|
-
<MorphScroll
|
|
228
|
+
<MorphScroll {...props}
|
|
246
229
|
isScrolling={(motion) => {
|
|
247
230
|
console.log(motion ? "Scrolling..." : "Scroll stopped.");
|
|
248
231
|
}}
|
|
249
|
-
// another props
|
|
250
232
|
>
|
|
251
233
|
{children}
|
|
252
234
|
</MorphScroll>
|
|
@@ -256,30 +238,25 @@ npm install morphing-scroll
|
|
|
256
238
|
|
|
257
239
|
<h2></h2>
|
|
258
240
|
|
|
259
|
-
|
|
241
|
+
##### **VISUAL SETTINGS**:
|
|
260
242
|
|
|
261
243
|
<details>
|
|
262
|
-
<summary><
|
|
244
|
+
<summary><b><code>size</code> REQUIRED</b>: <em>[width, height] dimension of <b>MorphScroll</b>.</em></summary><br />
|
|
263
245
|
<ul>
|
|
264
|
-
<
|
|
246
|
+
<b>Type:</b><br /> number | number[] | "auto"<br />
|
|
265
247
|
<br />
|
|
266
|
-
<
|
|
267
|
-
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 />
|
|
268
250
|
<br />
|
|
269
|
-
|
|
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 />
|
|
270
252
|
<br />
|
|
271
|
-
|
|
272
|
-
<ul>
|
|
273
|
-
<li>The values are specified following the <code>width/height</code> rule in pixels, regardless of the <code>direction</code>.</li>
|
|
274
|
-
<li>See the <code>ResizeTracker</code> section for more details.</li>
|
|
275
|
-
</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 />
|
|
276
254
|
<br />
|
|
277
|
-
<
|
|
255
|
+
<b>Example:</b>
|
|
278
256
|
|
|
279
257
|
```tsx
|
|
280
|
-
<MorphScroll
|
|
258
|
+
<MorphScroll {...props}
|
|
281
259
|
size={[100, 400]}
|
|
282
|
-
// another props
|
|
283
260
|
>
|
|
284
261
|
{children}
|
|
285
262
|
</MorphScroll>
|
|
@@ -290,28 +267,34 @@ npm install morphing-scroll
|
|
|
290
267
|
<h2></h2>
|
|
291
268
|
|
|
292
269
|
<details>
|
|
293
|
-
<summary><
|
|
270
|
+
<summary><b><code>objectsSize</code></b>: <em>[width, height] dimension of cells for each object.</em></summary><br />
|
|
294
271
|
<ul>
|
|
295
|
-
<
|
|
272
|
+
<b>Type:</b><br />
|
|
273
|
+
number | "firstChild"<br />
|
|
274
|
+
| (number | "none" | "firstChild")[]<br />
|
|
275
|
+
<br />
|
|
276
|
+
<b>Default:</b> If you don't provide any value, the default value will be taken from <code>size</code><br />
|
|
296
277
|
<br />
|
|
297
|
-
<
|
|
298
|
-
This parameter
|
|
278
|
+
<b>Description:</b> <em><br />
|
|
279
|
+
This parameter defines the [width, height] of cells for each of your objects.<br />
|
|
299
280
|
<br />
|
|
300
|
-
|
|
281
|
+
<mark>number</mark> - Sets a fixed size for your custom objects.<br />
|
|
301
282
|
<br />
|
|
302
|
-
|
|
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 />
|
|
303
284
|
<br />
|
|
304
|
-
|
|
305
|
-
The numbers are specified following the <code>width/height</code> rule, regardless of the <code>direction</code>.</em><br />
|
|
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 />
|
|
306
286
|
<br />
|
|
307
|
-
|
|
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>
|
|
308
294
|
|
|
309
295
|
```tsx
|
|
310
|
-
<MorphScroll
|
|
311
|
-
objectsSize={[
|
|
312
|
-
// objectsSize={["none", "none"]}
|
|
313
|
-
// objectsSize={["firstChild", "firstChild"]}
|
|
314
|
-
// another props
|
|
296
|
+
<MorphScroll {...props}
|
|
297
|
+
objectsSize={[80, 80]}
|
|
315
298
|
>
|
|
316
299
|
{children}
|
|
317
300
|
</MorphScroll>
|
|
@@ -322,23 +305,24 @@ npm install morphing-scroll
|
|
|
322
305
|
<h2></h2>
|
|
323
306
|
|
|
324
307
|
<details>
|
|
325
|
-
<summary><
|
|
308
|
+
<summary><b><code>crossCount</code></b>: <em>Number of cells in each direction.</em></summary><br />
|
|
326
309
|
<ul>
|
|
327
|
-
<
|
|
310
|
+
<b>Type:</b> number<br />
|
|
328
311
|
<br />
|
|
329
|
-
<
|
|
330
|
-
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 />
|
|
331
314
|
<br />
|
|
332
|
-
|
|
333
|
-
|
|
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 />
|
|
334
320
|
<br />
|
|
335
|
-
<
|
|
321
|
+
<b>Example:</b>
|
|
336
322
|
|
|
337
323
|
```tsx
|
|
338
|
-
<MorphScroll
|
|
339
|
-
|
|
340
|
-
// gap={[10, 10]}
|
|
341
|
-
// another props
|
|
324
|
+
<MorphScroll {...props}
|
|
325
|
+
crossCount={3}
|
|
342
326
|
>
|
|
343
327
|
{children}
|
|
344
328
|
</MorphScroll>
|
|
@@ -349,34 +333,21 @@ npm install morphing-scroll
|
|
|
349
333
|
<h2></h2>
|
|
350
334
|
|
|
351
335
|
<details>
|
|
352
|
-
<summary><
|
|
336
|
+
<summary><b><code>gap</code></b>: <em>Gap between cells.</em></summary><br />
|
|
353
337
|
<ul>
|
|
354
|
-
<
|
|
338
|
+
<b>Type:</b> number | number[]<br />
|
|
355
339
|
<br />
|
|
356
|
-
<
|
|
357
|
-
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 />
|
|
358
342
|
<br />
|
|
359
|
-
|
|
360
|
-
|
|
361
|
-
<li>
|
|
362
|
-
This parameter accepts either a single number or an array of numbers
|
|
363
|
-
<ul>
|
|
364
|
-
<li>If a two-number array is provided, the values follow the <code>horizontal/vertical</code> rule.</li>
|
|
365
|
-
<li>If a four-number array is provided, the values follow the <code>top/right/bottom/left</code> rule.</li>
|
|
366
|
-
</ul>
|
|
367
|
-
</li>
|
|
368
|
-
<li>All values are in pixels and apply regardless of the <code>direction</code>.</li>
|
|
369
|
-
<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>
|
|
370
|
-
</ul></em><br />
|
|
343
|
+
✦ Note:<br />
|
|
344
|
+
It can be 1 number or an array of 2 or 4 numbers.</em><br />
|
|
371
345
|
<br />
|
|
372
|
-
<
|
|
346
|
+
<b>Example:</b>
|
|
373
347
|
|
|
374
348
|
```tsx
|
|
375
|
-
<MorphScroll
|
|
376
|
-
|
|
377
|
-
// padding={[10, 10]}
|
|
378
|
-
// padding={[10, 10, 10, 10]}
|
|
379
|
-
// another props
|
|
349
|
+
<MorphScroll {...props}
|
|
350
|
+
gap={10}
|
|
380
351
|
>
|
|
381
352
|
{children}
|
|
382
353
|
</MorphScroll>
|
|
@@ -387,29 +358,21 @@ npm install morphing-scroll
|
|
|
387
358
|
<h2></h2>
|
|
388
359
|
|
|
389
360
|
<details>
|
|
390
|
-
<summary><
|
|
361
|
+
<summary><b><code>wrapperMargin</code></b>: <em>Margin for the <b>.ms-objects-wrapper</b>.</em></summary><br />
|
|
391
362
|
<ul>
|
|
392
|
-
<
|
|
393
|
-
"start" | "center" | "end",<br />
|
|
394
|
-
"start" | "center" | "end"<br />
|
|
395
|
-
]<br />
|
|
396
|
-
<strong>Description:</strong> <em><br />
|
|
397
|
-
This parameter aligns the `objectsWrapper`, which contains all the provided elements, relative to the scroll or the `size`.<br />
|
|
398
|
-
<br />
|
|
399
|
-
⚠ Note:<br />
|
|
400
|
-
<ul>
|
|
401
|
-
<li>Only takes effect when `objectsWrapper` is smaller than the scroll container.
|
|
402
|
-
</li>
|
|
403
|
-
<li>The values are specified following the horizontal/vertical rule, regardless of the direction.
|
|
404
|
-
</li>
|
|
405
|
-
</ul></em><br />
|
|
363
|
+
<b>Type:</b> number | number[]<br />
|
|
406
364
|
<br />
|
|
407
|
-
<
|
|
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>
|
|
408
372
|
|
|
409
373
|
```tsx
|
|
410
|
-
<MorphScroll
|
|
411
|
-
|
|
412
|
-
// another props
|
|
374
|
+
<MorphScroll {...props}
|
|
375
|
+
wrapperMargin={10}
|
|
413
376
|
>
|
|
414
377
|
{children}
|
|
415
378
|
</MorphScroll>
|
|
@@ -420,16 +383,20 @@ npm install morphing-scroll
|
|
|
420
383
|
<h2></h2>
|
|
421
384
|
|
|
422
385
|
<details>
|
|
423
|
-
<summary><
|
|
386
|
+
<summary><b><code>wrapperMinSize</code></b>: <em>Minimum height or width of the <b>.ms-objects-wrapper</b>.</em></summary><br />
|
|
424
387
|
<ul>
|
|
425
|
-
<
|
|
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 />
|
|
426
391
|
<br />
|
|
427
|
-
|
|
392
|
+
✦ Note:<br />
|
|
393
|
+
Can be used as 1 value, or an array of 2 values.</em><br />
|
|
394
|
+
<br />
|
|
395
|
+
<b>Example:</b>
|
|
428
396
|
|
|
429
397
|
```tsx
|
|
430
|
-
<MorphScroll
|
|
431
|
-
|
|
432
|
-
// another props
|
|
398
|
+
<MorphScroll {...props}
|
|
399
|
+
wrapperMinSize={"full"}
|
|
433
400
|
>
|
|
434
401
|
{children}
|
|
435
402
|
</MorphScroll>
|
|
@@ -440,28 +407,23 @@ npm install morphing-scroll
|
|
|
440
407
|
<h2></h2>
|
|
441
408
|
|
|
442
409
|
<details>
|
|
443
|
-
<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 />
|
|
444
411
|
<ul>
|
|
445
|
-
<
|
|
412
|
+
<b>Type:</b><br />
|
|
413
|
+
"start" | "center" | "end"<br />
|
|
414
|
+
| ("start" | "center" | "end")[]<br />
|
|
446
415
|
<br />
|
|
447
|
-
<
|
|
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 />
|
|
448
418
|
<br />
|
|
449
|
-
|
|
450
|
-
|
|
451
|
-
<br />
|
|
452
|
-
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 />
|
|
453
|
-
<br />
|
|
454
|
-
⚠ Note:<br />
|
|
455
|
-
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 />
|
|
456
421
|
<br />
|
|
457
|
-
<
|
|
422
|
+
<b>Example:</b>
|
|
458
423
|
|
|
459
424
|
```tsx
|
|
460
|
-
<MorphScroll
|
|
461
|
-
|
|
462
|
-
// edgeGradient={{ color: "rgba(0, 0, 0, 0.5)", size: 20 }}
|
|
463
|
-
// edgeGradient
|
|
464
|
-
// another props
|
|
425
|
+
<MorphScroll {...props}
|
|
426
|
+
contentAlign={["center", "center"]}
|
|
465
427
|
>
|
|
466
428
|
{children}
|
|
467
429
|
</MorphScroll>
|
|
@@ -472,25 +434,15 @@ npm install morphing-scroll
|
|
|
472
434
|
<h2></h2>
|
|
473
435
|
|
|
474
436
|
<details>
|
|
475
|
-
<summary><
|
|
437
|
+
<summary><b><code>elementsAlign</code></b>: <em>Aligns the objects inside <code>MorphScroll</code>.</em></summary><br />
|
|
476
438
|
<ul>
|
|
477
|
-
<
|
|
478
|
-
<br />
|
|
479
|
-
<strong>Default:</strong> false<br />
|
|
439
|
+
<b>Type:</b> "start" | "center" | "end"<br />
|
|
480
440
|
<br />
|
|
481
|
-
<
|
|
482
|
-
This parameter changes the position of the progress bar based on the direction property.<br />
|
|
483
|
-
<ul>
|
|
484
|
-
<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>
|
|
485
|
-
<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>
|
|
486
|
-
</ul></em><br />
|
|
487
|
-
<br />
|
|
488
|
-
<strong>Example:</strong>
|
|
441
|
+
<b>Example:</b>
|
|
489
442
|
|
|
490
443
|
```tsx
|
|
491
|
-
<MorphScroll
|
|
492
|
-
|
|
493
|
-
// another props
|
|
444
|
+
<MorphScroll {...props}
|
|
445
|
+
elementsAlign="center"
|
|
494
446
|
>
|
|
495
447
|
{children}
|
|
496
448
|
</MorphScroll>
|
|
@@ -501,21 +453,20 @@ npm install morphing-scroll
|
|
|
501
453
|
<h2></h2>
|
|
502
454
|
|
|
503
455
|
<details>
|
|
504
|
-
<summary><
|
|
456
|
+
<summary><b><code>elementsDirection</code></b>: <em>Direction of the provided elements.</em></summary><br />
|
|
505
457
|
<ul>
|
|
506
|
-
<
|
|
458
|
+
<b>Type:</b> "row" | "column"<br />
|
|
507
459
|
<br />
|
|
508
|
-
<
|
|
460
|
+
<b>Default:</b> "row"<br />
|
|
509
461
|
<br />
|
|
510
|
-
<
|
|
511
|
-
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 />
|
|
512
464
|
<br />
|
|
513
|
-
<
|
|
465
|
+
<b>Example:</b>
|
|
514
466
|
|
|
515
467
|
```tsx
|
|
516
|
-
<MorphScroll
|
|
517
|
-
|
|
518
|
-
// another props
|
|
468
|
+
<MorphScroll {...props}
|
|
469
|
+
elementsDirection="column"
|
|
519
470
|
>
|
|
520
471
|
{children}
|
|
521
472
|
</MorphScroll>
|
|
@@ -526,19 +477,28 @@ npm install morphing-scroll
|
|
|
526
477
|
<h2></h2>
|
|
527
478
|
|
|
528
479
|
<details>
|
|
529
|
-
<summary><
|
|
480
|
+
<summary><b><code>edgeGradient</code></b>: <em>Gradient overlay at the edges of the scroll area.</em></summary><br />
|
|
530
481
|
<ul>
|
|
531
|
-
<
|
|
532
|
-
<strong>Default:</strong> false<br /><br />
|
|
533
|
-
<strong>Description:</strong> <em><br />
|
|
534
|
-
In process of development</em><br />
|
|
482
|
+
<b>Type:</b> boolean | { color?: string; size?: number }<br />
|
|
535
483
|
<br />
|
|
536
|
-
<
|
|
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 />
|
|
493
|
+
<br />
|
|
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>
|
|
537
498
|
|
|
538
499
|
```tsx
|
|
539
|
-
<MorphScroll
|
|
540
|
-
|
|
541
|
-
// another props
|
|
500
|
+
<MorphScroll {...props}
|
|
501
|
+
edgeGradient={{ color: "rgba(0, 0, 0, 0.5)", size: 60 }}
|
|
542
502
|
>
|
|
543
503
|
{children}
|
|
544
504
|
</MorphScroll>
|
|
@@ -548,39 +508,52 @@ npm install morphing-scroll
|
|
|
548
508
|
|
|
549
509
|
<h2></h2>
|
|
550
510
|
|
|
551
|
-
|
|
511
|
+
##### **PROGRESSBAR**:
|
|
552
512
|
|
|
553
513
|
<details>
|
|
554
|
-
<summary><
|
|
514
|
+
<summary><b><code>progressTrigger</code></b>: <em>Triggers for the scroll progress.</em></summary><br />
|
|
555
515
|
<ul>
|
|
556
|
-
<
|
|
516
|
+
<b>Type:</b> {<br />
|
|
557
517
|
wheel?: boolean;<br />
|
|
558
518
|
content?: boolean;<br />
|
|
559
|
-
progressElement?: boolean | React.ReactNode;<br />
|
|
519
|
+
progressElement?: boolean | React.ReactNode | React.ReactNode[];<br />
|
|
560
520
|
arrows?: boolean | { size?: number; element?: React.ReactNode };<br />
|
|
561
521
|
}<br />
|
|
562
522
|
<br />
|
|
563
|
-
<
|
|
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 />
|
|
564
527
|
<br />
|
|
565
|
-
<
|
|
566
|
-
This
|
|
528
|
+
<code>wheel</code> :<br />
|
|
529
|
+
This parameter determines whether the progress bar responds to mouse wheel scrolling.<br />
|
|
530
|
+
<br />
|
|
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 />
|
|
567
536
|
<br />
|
|
568
537
|
<ul>
|
|
569
|
-
<li>
|
|
570
|
-
<li>
|
|
571
|
-
<li>
|
|
572
|
-
|
|
573
|
-
|
|
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>
|
|
542
|
+
<br />
|
|
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 />
|
|
574
545
|
<br />
|
|
575
|
-
|
|
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>
|
|
576
550
|
|
|
577
551
|
```tsx
|
|
578
|
-
<MorphScroll
|
|
552
|
+
<MorphScroll {...props}
|
|
579
553
|
progressTrigger={{
|
|
580
554
|
wheel: true,
|
|
581
555
|
progressElement: <div className="your-scroll-thumb" />,
|
|
582
556
|
}}
|
|
583
|
-
// another props
|
|
584
557
|
>
|
|
585
558
|
{children}
|
|
586
559
|
</MorphScroll>
|
|
@@ -591,48 +564,95 @@ npm install morphing-scroll
|
|
|
591
564
|
<h2></h2>
|
|
592
565
|
|
|
593
566
|
<details>
|
|
594
|
-
<summary><
|
|
567
|
+
<summary><b><code>progressReverse</code></b>: <em>Reverse the progress bar position.</em></summary><br />
|
|
595
568
|
<ul>
|
|
596
|
-
<
|
|
597
|
-
| { type: "default" }<br />
|
|
598
|
-
| { type: "lazy"; rootMargin?: number | number[]; onVisible?: (key: string) => void }<br />
|
|
599
|
-
| { type: "virtual"; rootMargin?: number | number[] }<br />
|
|
569
|
+
<b>Type:</b> boolean | boolean[]<br />
|
|
600
570
|
<br />
|
|
601
|
-
<
|
|
571
|
+
<b>Default:</b> false<br />
|
|
602
572
|
<br />
|
|
603
|
-
<
|
|
604
|
-
This parameter
|
|
573
|
+
<b>Description:</b> <em><br />
|
|
574
|
+
This parameter changes the position of the progress bar based on the direction property.<br />
|
|
605
575
|
<br />
|
|
606
576
|
<ul>
|
|
607
|
-
<li>
|
|
608
|
-
<li>
|
|
609
|
-
<li>
|
|
610
|
-
</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 />
|
|
611
606
|
<br />
|
|
612
|
-
|
|
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 />
|
|
631
|
+
<br />
|
|
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 />
|
|
613
637
|
<ul>
|
|
614
|
-
<li>
|
|
615
|
-
<li>
|
|
616
|
-
|
|
617
|
-
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
</ul>
|
|
621
|
-
</li>
|
|
622
|
-
<li>All values are in pixels and apply regardless of the <code>direction</code>.</li>
|
|
623
|
-
</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>
|
|
641
|
+
<br />
|
|
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 />
|
|
624
644
|
<br />
|
|
625
|
-
<
|
|
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>
|
|
626
652
|
|
|
627
653
|
```tsx
|
|
628
|
-
<MorphScroll
|
|
654
|
+
<MorphScroll {...props}
|
|
629
655
|
render={{ type: "virtual" }}
|
|
630
|
-
// render={{
|
|
631
|
-
// type: "lazy",
|
|
632
|
-
// rootMargin: [0, 100],
|
|
633
|
-
// onVisible: () => console.log("visible"))
|
|
634
|
-
// }}
|
|
635
|
-
// another props
|
|
636
656
|
>
|
|
637
657
|
{children}
|
|
638
658
|
</MorphScroll>
|
|
@@ -643,47 +663,40 @@ npm install morphing-scroll
|
|
|
643
663
|
<h2></h2>
|
|
644
664
|
|
|
645
665
|
<details>
|
|
646
|
-
<summary><
|
|
666
|
+
<summary><b><code>emptyElements</code></b>: <em>Handling of empty scroll elements.</em></summary><br />
|
|
647
667
|
<ul>
|
|
648
|
-
<
|
|
649
|
-
|
|
650
|
-
|
|
651
|
-
|
|
652
|
-
}<br />
|
|
653
|
-
| {
|
|
654
|
-
mode: "fallback";
|
|
655
|
-
element?: React.ReactNode;
|
|
656
|
-
clickTrigger?: { selector: string; delay?: number };
|
|
657
|
-
}<br /><br />
|
|
658
|
-
<strong>Description:</strong> <em><br />
|
|
659
|
-
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 />
|
|
660
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 />
|
|
675
|
+
<br />
|
|
676
|
+
<code>mode</code> :<br />
|
|
661
677
|
<ul>
|
|
662
|
-
<li><
|
|
663
|
-
<li><
|
|
664
|
-
|
|
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>
|
|
665
682
|
<br />
|
|
666
|
-
<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 />
|
|
667
685
|
<br />
|
|
668
|
-
|
|
669
|
-
|
|
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>
|
|
670
691
|
<br />
|
|
671
|
-
<
|
|
692
|
+
<b>Example:</b>
|
|
672
693
|
|
|
673
694
|
```tsx
|
|
674
|
-
<MorphScroll
|
|
695
|
+
<MorphScroll {...props}
|
|
675
696
|
emptyElements={{
|
|
676
697
|
mode: "clear",
|
|
677
698
|
clickTrigger: { selector: ".close-button" },
|
|
678
699
|
}}
|
|
679
|
-
// emptyElements={{
|
|
680
|
-
// mode: "fallback",
|
|
681
|
-
// clickTrigger: {
|
|
682
|
-
// selector: ".close-button",
|
|
683
|
-
// delay: 100,
|
|
684
|
-
// },
|
|
685
|
-
// }}
|
|
686
|
-
// another props
|
|
687
700
|
>
|
|
688
701
|
{children}
|
|
689
702
|
</MorphScroll>
|
|
@@ -694,21 +707,20 @@ npm install morphing-scroll
|
|
|
694
707
|
<h2></h2>
|
|
695
708
|
|
|
696
709
|
<details>
|
|
697
|
-
<summary><
|
|
710
|
+
<summary><b><code>suspending</code></b>: <em>Adds React Suspense.</em></summary><br />
|
|
698
711
|
<ul>
|
|
699
|
-
<
|
|
712
|
+
<b>Type:</b> boolean<br />
|
|
700
713
|
<br />
|
|
701
|
-
<
|
|
714
|
+
<b>Default:</b> false<br />
|
|
702
715
|
<br />
|
|
703
|
-
<
|
|
716
|
+
<b>Description:</b> <em><br />
|
|
704
717
|
This parameter adds React Suspense to the MorphScroll component for asynchronous rendering.</em><br />
|
|
705
718
|
<br />
|
|
706
|
-
<
|
|
719
|
+
<b>Example:</b>
|
|
707
720
|
|
|
708
721
|
```tsx
|
|
709
|
-
<MorphScroll
|
|
722
|
+
<MorphScroll {...props}
|
|
710
723
|
suspending
|
|
711
|
-
// another props
|
|
712
724
|
>
|
|
713
725
|
{children}
|
|
714
726
|
</MorphScroll>
|
|
@@ -719,19 +731,24 @@ npm install morphing-scroll
|
|
|
719
731
|
<h2></h2>
|
|
720
732
|
|
|
721
733
|
<details>
|
|
722
|
-
<summary><
|
|
734
|
+
<summary><b><code>fallback</code></b>: <em>Fallback element.</em></summary><br />
|
|
723
735
|
<ul>
|
|
724
|
-
<
|
|
736
|
+
<b>Type:</b> React.ReactNode<br />
|
|
725
737
|
<br />
|
|
726
|
-
<
|
|
727
|
-
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 />
|
|
728
746
|
<br />
|
|
729
|
-
<
|
|
747
|
+
<b>Example:</b>
|
|
730
748
|
|
|
731
749
|
```tsx
|
|
732
|
-
<MorphScroll
|
|
750
|
+
<MorphScroll {...props}
|
|
733
751
|
fallback={<div>Loading...</div>}
|
|
734
|
-
// another props
|
|
735
752
|
>
|
|
736
753
|
{children}
|
|
737
754
|
</MorphScroll>
|
|
@@ -743,47 +760,49 @@ npm install morphing-scroll
|
|
|
743
760
|
|
|
744
761
|
<h2></h2>
|
|
745
762
|
|
|
746
|
-
|
|
763
|
+
#### ♦ ResizeTracker
|
|
747
764
|
|
|
748
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.
|
|
749
766
|
|
|
750
|
-
-
|
|
767
|
+
- #### Props:
|
|
751
768
|
|
|
752
769
|
<div>
|
|
753
770
|
|
|
754
771
|
<details>
|
|
755
|
-
<summary><
|
|
772
|
+
<summary><b><code>className</code></b>: <em>Additional classes.</em></summary><br />
|
|
756
773
|
<ul>
|
|
757
|
-
<
|
|
758
|
-
<br />
|
|
759
|
-
<strong>Description:</strong> <em><br />
|
|
760
|
-
Instead of a standard <code>children</code> prop, this component uses a <strong>render-prop function</strong> to pass size updates to its children. You can use it similarly to a regular <code>children</code> prop inside the component.<br />
|
|
761
|
-
<br />
|
|
762
|
-
The function receives an object of type <code>DOMRectReadOnly</code> with the following properties:
|
|
763
|
-
<ul>
|
|
764
|
-
<li><code>x</code> - The X-coordinate of the top-left corner of the element.</li>
|
|
765
|
-
<li><code>y</code> - The Y-coordinate of the top-left corner of the element.</li>
|
|
766
|
-
<li><code>width</code> - The width of the observed element’s content box.</li>
|
|
767
|
-
<li><code>height</code> - The height of the observed element’s content box.</li>
|
|
768
|
-
<li><code>top</code> - The distance from the top of the element to its parent's top. Equal to <code>y</code>.</li>
|
|
769
|
-
<li><code>left</code> - The distance from the left of the element to its parent's left. Equal to <code>x</code>.</li>
|
|
770
|
-
<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>
|
|
771
|
-
<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>
|
|
772
|
-
</ul><br />
|
|
774
|
+
<b>Type:</b> string<br />
|
|
773
775
|
<br />
|
|
774
|
-
|
|
776
|
+
<b>Description:</b> <em><br />
|
|
777
|
+
This parameter allows you to add additional classes to the component.</em><br />
|
|
775
778
|
<br />
|
|
776
|
-
<
|
|
779
|
+
<b>Example:</b>
|
|
777
780
|
|
|
778
781
|
```tsx
|
|
779
782
|
<ResizeTracker
|
|
780
|
-
|
|
783
|
+
className="custom-class"
|
|
781
784
|
>
|
|
782
|
-
{
|
|
783
|
-
|
|
784
|
-
|
|
785
|
-
|
|
786
|
-
|
|
785
|
+
{children}
|
|
786
|
+
</ResizeTracker>
|
|
787
|
+
```
|
|
788
|
+
|
|
789
|
+
</ul></details>
|
|
790
|
+
|
|
791
|
+
<h2></h2>
|
|
792
|
+
|
|
793
|
+
<details>
|
|
794
|
+
<summary><b><code>children</code></b>: <em>Custom user content.</em></summary><br />
|
|
795
|
+
<ul>
|
|
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 />
|
|
800
|
+
<br />
|
|
801
|
+
<b>Example:</b>
|
|
802
|
+
|
|
803
|
+
```tsx
|
|
804
|
+
<ResizeTracker >
|
|
805
|
+
{children}
|
|
787
806
|
</ResizeTracker>
|
|
788
807
|
```
|
|
789
808
|
|
|
@@ -792,17 +811,17 @@ npm install morphing-scroll
|
|
|
792
811
|
<h2></h2>
|
|
793
812
|
|
|
794
813
|
<details>
|
|
795
|
-
<summary><
|
|
814
|
+
<summary><b><code>style</code></b>: <em>Applies inline styles to the container.</em></summary><br />
|
|
796
815
|
<ul>
|
|
797
|
-
<
|
|
816
|
+
<b>Type:</b> React.CSSProperties<br />
|
|
798
817
|
<br />
|
|
799
|
-
<
|
|
818
|
+
<b>Example:</b>
|
|
800
819
|
|
|
801
820
|
```tsx
|
|
802
|
-
<ResizeTracker
|
|
803
|
-
{
|
|
804
|
-
|
|
805
|
-
|
|
821
|
+
<ResizeTracker
|
|
822
|
+
style={{ backgroundColor: "yellow" }}
|
|
823
|
+
>
|
|
824
|
+
{children}
|
|
806
825
|
</ResizeTracker>
|
|
807
826
|
```
|
|
808
827
|
|
|
@@ -811,28 +830,31 @@ npm install morphing-scroll
|
|
|
811
830
|
<h2></h2>
|
|
812
831
|
|
|
813
832
|
<details>
|
|
814
|
-
<summary><
|
|
833
|
+
<summary><b><code>measure</code></b>: <em>Defines the measurement strategy.</em></summary><br />
|
|
815
834
|
<ul>
|
|
816
|
-
<
|
|
835
|
+
<b>Type:</b> "inner" | "outer" | "all"<br />
|
|
817
836
|
<br />
|
|
818
|
-
<
|
|
837
|
+
<b>Default:</b> "inner"<br />
|
|
819
838
|
<br />
|
|
820
|
-
<
|
|
839
|
+
<b>Description:</b><br />
|
|
821
840
|
<em>This prop determines what is being measured by automatically applying inline styles that affect width and height.<br />
|
|
822
841
|
<br />
|
|
823
|
-
|
|
824
|
-
|
|
825
|
-
|
|
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>
|
|
826
847
|
<br />
|
|
827
|
-
|
|
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 />
|
|
828
850
|
<br />
|
|
829
|
-
<
|
|
851
|
+
<b>Example:</b>
|
|
830
852
|
|
|
831
853
|
```tsx
|
|
832
|
-
<ResizeTracker
|
|
833
|
-
|
|
834
|
-
|
|
835
|
-
|
|
854
|
+
<ResizeTracker
|
|
855
|
+
measure="all"
|
|
856
|
+
>
|
|
857
|
+
{children}
|
|
836
858
|
</ResizeTracker>
|
|
837
859
|
```
|
|
838
860
|
|
|
@@ -841,15 +863,15 @@ npm install morphing-scroll
|
|
|
841
863
|
<h2></h2>
|
|
842
864
|
|
|
843
865
|
<details>
|
|
844
|
-
<summary><
|
|
866
|
+
<summary><b><code>onResize</code></b>: <em>Callback triggered on size changes.</em></summary><br />
|
|
845
867
|
<ul>
|
|
846
|
-
<
|
|
868
|
+
<b>Type:</b> (rect: Partial<DOMRectReadOnly>) => void<br />
|
|
847
869
|
<br />
|
|
848
|
-
<
|
|
870
|
+
<b>Description:</b><br />
|
|
849
871
|
<em>A callback function that is triggered whenever the observed element's dimensions change.<br />
|
|
850
872
|
The function receives an object containing the updated size properties.</em><br />
|
|
851
873
|
<br />
|
|
852
|
-
<
|
|
874
|
+
<b>Example:</b>
|
|
853
875
|
|
|
854
876
|
```tsx
|
|
855
877
|
<ResizeTracker
|
|
@@ -857,9 +879,7 @@ npm install morphing-scroll
|
|
|
857
879
|
console.log("New size:", rect);
|
|
858
880
|
}}
|
|
859
881
|
>
|
|
860
|
-
{
|
|
861
|
-
// content
|
|
862
|
-
)}
|
|
882
|
+
{children}
|
|
863
883
|
</ResizeTracker>
|
|
864
884
|
```
|
|
865
885
|
|
|
@@ -869,29 +889,53 @@ npm install morphing-scroll
|
|
|
869
889
|
|
|
870
890
|
</div>
|
|
871
891
|
|
|
872
|
-
-
|
|
892
|
+
- #### Link:
|
|
873
893
|
|
|
874
894
|
[IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
|
|
875
895
|
|
|
876
896
|
<h2></h2>
|
|
877
897
|
|
|
878
|
-
|
|
898
|
+
#### ♦ IntersectionTracker
|
|
879
899
|
|
|
880
900
|
`IntersectionTracker` is a React component for tracking the intersection of an element with the viewport.
|
|
881
901
|
|
|
882
|
-
-
|
|
902
|
+
- #### Props:
|
|
883
903
|
|
|
884
904
|
<div>
|
|
885
905
|
|
|
886
906
|
<details>
|
|
887
|
-
<summary><
|
|
907
|
+
<summary><b><code>className</code></b>: <em>Additional classes.</em></summary><br />
|
|
908
|
+
<ul>
|
|
909
|
+
<b>Type:</b> string<br />
|
|
910
|
+
<br />
|
|
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>
|
|
915
|
+
|
|
916
|
+
```tsx
|
|
917
|
+
<IntersectionTracker
|
|
918
|
+
className="custom-class"
|
|
919
|
+
>
|
|
920
|
+
{children}
|
|
921
|
+
</IntersectionTracker>
|
|
922
|
+
```
|
|
923
|
+
|
|
924
|
+
</ul></details>
|
|
925
|
+
|
|
926
|
+
<h2></h2>
|
|
927
|
+
|
|
928
|
+
<details>
|
|
929
|
+
<summary><b><code>children</code></b>: <em>Custom user content.</em></summary><br />
|
|
888
930
|
<ul>
|
|
889
|
-
<
|
|
931
|
+
<b>Type:</b> React.ReactNode<br />
|
|
890
932
|
<br />
|
|
891
|
-
<
|
|
933
|
+
<b>Example:</b>
|
|
892
934
|
|
|
893
935
|
```tsx
|
|
894
|
-
<IntersectionTracker>
|
|
936
|
+
<IntersectionTracker>
|
|
937
|
+
{children}
|
|
938
|
+
</IntersectionTracker>
|
|
895
939
|
```
|
|
896
940
|
|
|
897
941
|
</ul></details>
|
|
@@ -899,14 +943,16 @@ npm install morphing-scroll
|
|
|
899
943
|
<h2></h2>
|
|
900
944
|
|
|
901
945
|
<details>
|
|
902
|
-
<summary><
|
|
946
|
+
<summary><b><code>style</code></b>: <em>Applies inline styles to the container.</em></summary><br />
|
|
903
947
|
<ul>
|
|
904
|
-
<
|
|
948
|
+
<b>Type:</b> React.CSSProperties<br />
|
|
905
949
|
<br />
|
|
906
|
-
<
|
|
950
|
+
<b>Example:</b>
|
|
907
951
|
|
|
908
952
|
```tsx
|
|
909
|
-
<IntersectionTracker
|
|
953
|
+
<IntersectionTracker
|
|
954
|
+
style={{ backgroundColor: "yellow" }}
|
|
955
|
+
>
|
|
910
956
|
{children}
|
|
911
957
|
</IntersectionTracker>
|
|
912
958
|
```
|
|
@@ -916,22 +962,22 @@ npm install morphing-scroll
|
|
|
916
962
|
<h2></h2>
|
|
917
963
|
|
|
918
964
|
<details>
|
|
919
|
-
<summary><
|
|
965
|
+
<summary><b><code>root</code></b>: <em>Defines the observation area.</em></summary><br />
|
|
920
966
|
<ul>
|
|
921
|
-
<
|
|
967
|
+
<b>Type:</b> Element | null<br />
|
|
922
968
|
<br />
|
|
923
|
-
<
|
|
969
|
+
<b>Default:</b> null (window)<br />
|
|
924
970
|
<br />
|
|
925
|
-
<
|
|
971
|
+
<b>Description:</b> <em><br />
|
|
926
972
|
Specifies the element that serves as the bounding box for the intersection observation.
|
|
927
|
-
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 />
|
|
928
974
|
<br />
|
|
929
|
-
|
|
930
|
-
<br />
|
|
931
|
-
<strong>Example:</strong>
|
|
975
|
+
<b>Example:</b>
|
|
932
976
|
|
|
933
977
|
```tsx
|
|
934
|
-
<IntersectionTracker
|
|
978
|
+
<IntersectionTracker
|
|
979
|
+
root={document.getElementById("observer-container")}
|
|
980
|
+
>
|
|
935
981
|
{children}
|
|
936
982
|
</IntersectionTracker>
|
|
937
983
|
```
|
|
@@ -941,29 +987,21 @@ npm install morphing-scroll
|
|
|
941
987
|
<h2></h2>
|
|
942
988
|
|
|
943
989
|
<details>
|
|
944
|
-
<summary><
|
|
990
|
+
<summary><b><code>rootMargin</code></b>: <em>Sets the margin around the root element.</em></summary><br />
|
|
945
991
|
<ul>
|
|
946
|
-
<
|
|
992
|
+
<b>Type:</b> number | number[]<br />
|
|
947
993
|
<br />
|
|
948
|
-
<
|
|
994
|
+
<b>Description:</b> <em><br />
|
|
949
995
|
Defines an offset around the root element, expanding or shrinking the observed area.<br />
|
|
950
996
|
<br />
|
|
951
|
-
|
|
952
|
-
<
|
|
953
|
-
<li>A <strong>single number</strong> sets the same margin on all sides.</li>
|
|
954
|
-
<li>A <strong>two-value array</strong> <code>[topBottom, leftRight]</code> applies margins vertically and horizontally.</li>
|
|
955
|
-
<li>A <strong>four-value array</strong> <code>[top, right, bottom, left]</code> allows full control over each side.</li>
|
|
956
|
-
</ul>
|
|
957
|
-
<br />
|
|
958
|
-
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 />
|
|
959
999
|
<br />
|
|
960
|
-
<
|
|
1000
|
+
<b>Example:</b>
|
|
961
1001
|
|
|
962
1002
|
```tsx
|
|
963
1003
|
<IntersectionTracker
|
|
964
1004
|
rootMargin={10}
|
|
965
|
-
// rootMargin={[10, 20]}
|
|
966
|
-
// rootMargin={[10, 20, 10, 20]}
|
|
967
1005
|
>
|
|
968
1006
|
{children}
|
|
969
1007
|
</IntersectionTracker>
|
|
@@ -974,26 +1012,24 @@ npm install morphing-scroll
|
|
|
974
1012
|
<h2></h2>
|
|
975
1013
|
|
|
976
1014
|
<details>
|
|
977
|
-
<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 />
|
|
978
1016
|
<ul>
|
|
979
|
-
<
|
|
1017
|
+
<b>Type:</b> number | number[]<br />
|
|
980
1018
|
<br />
|
|
981
|
-
<
|
|
982
|
-
|
|
1019
|
+
<b>Description:</b> <em><br />
|
|
1020
|
+
Specifies at what percentage of the observed element’s visibility the callback should be executed.<br />
|
|
983
1021
|
<br />
|
|
1022
|
+
✦ Note:<br />
|
|
984
1023
|
<ul>
|
|
985
|
-
<li>A
|
|
986
|
-
<li>
|
|
987
|
-
</ul>
|
|
988
|
-
<br />
|
|
989
|
-
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.</em><br />
|
|
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>
|
|
990
1027
|
<br />
|
|
991
|
-
<
|
|
1028
|
+
<b>Example:</b>
|
|
992
1029
|
|
|
993
1030
|
```tsx
|
|
994
1031
|
<IntersectionTracker
|
|
995
1032
|
threshold={0.5}
|
|
996
|
-
// threshold={[0, 0.5, 1]}
|
|
997
1033
|
>
|
|
998
1034
|
{children}
|
|
999
1035
|
</IntersectionTracker>
|
|
@@ -1004,21 +1040,24 @@ npm install morphing-scroll
|
|
|
1004
1040
|
<h2></h2>
|
|
1005
1041
|
|
|
1006
1042
|
<details>
|
|
1007
|
-
<summary><
|
|
1043
|
+
<summary><b><code>visibleContent</code></b>: <em>Makes all elements always visible.</em></summary><br />
|
|
1008
1044
|
<ul>
|
|
1009
|
-
<
|
|
1045
|
+
<b>Type:</b> boolean<br />
|
|
1010
1046
|
<br />
|
|
1011
|
-
<
|
|
1012
|
-
<br />
|
|
1013
|
-
<strong>Description:</strong> <em><br />
|
|
1014
|
-
If set to `true`, the tracked elements will always be visible, regardless of their actual intersection status.
|
|
1047
|
+
<b>Default:</b> false<br />
|
|
1015
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 />
|
|
1016
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 />
|
|
1017
1052
|
<br />
|
|
1018
|
-
<
|
|
1053
|
+
<b>Example:</b>
|
|
1019
1054
|
|
|
1020
1055
|
```tsx
|
|
1021
|
-
<IntersectionTracker
|
|
1056
|
+
<IntersectionTracker
|
|
1057
|
+
visibleContent
|
|
1058
|
+
>
|
|
1059
|
+
{children}
|
|
1060
|
+
</IntersectionTracker>
|
|
1022
1061
|
```
|
|
1023
1062
|
|
|
1024
1063
|
</ul></details>
|
|
@@ -1026,28 +1065,31 @@ npm install morphing-scroll
|
|
|
1026
1065
|
<h2></h2>
|
|
1027
1066
|
|
|
1028
1067
|
<details>
|
|
1029
|
-
<summary><
|
|
1068
|
+
<summary><b><code>onVisible</code></b>: <em>Callback function triggered when the element becomes visible.</em></summary><br />
|
|
1030
1069
|
<ul>
|
|
1031
|
-
<
|
|
1070
|
+
<b>Type:</b> (entry: IntersectionObserverEntry) => void<br />
|
|
1032
1071
|
<br />
|
|
1033
|
-
<
|
|
1034
|
-
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 />
|
|
1035
1074
|
<br />
|
|
1036
|
-
|
|
1037
|
-
|
|
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>
|
|
1038
1085
|
<br />
|
|
1039
|
-
|
|
1040
|
-
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 />
|
|
1041
1087
|
<br />
|
|
1042
|
-
<
|
|
1088
|
+
<b>Example:</b>
|
|
1043
1089
|
|
|
1044
1090
|
```tsx
|
|
1045
1091
|
<IntersectionTracker
|
|
1046
|
-
onVisible={(
|
|
1047
|
-
if (key.includes("elementId")) {
|
|
1048
|
-
// do something
|
|
1049
|
-
}
|
|
1050
|
-
}}
|
|
1092
|
+
onVisible={(entry) => console.log(entry)}
|
|
1051
1093
|
>
|
|
1052
1094
|
{children}
|
|
1053
1095
|
</IntersectionTracker>
|
|
@@ -1059,14 +1101,14 @@ npm install morphing-scroll
|
|
|
1059
1101
|
|
|
1060
1102
|
</div>
|
|
1061
1103
|
|
|
1062
|
-
-
|
|
1104
|
+
- #### Link:
|
|
1063
1105
|
|
|
1064
1106
|
[IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
|
|
1065
1107
|
|
|
1066
1108
|
<h2></h2>
|
|
1067
1109
|
|
|
1068
|
-
###
|
|
1110
|
+
### 〈 API 〉
|
|
1069
1111
|
|
|
1070
|
-
- `MorphScroll`:
|
|
1071
|
-
- `ResizeTracker`:
|
|
1072
|
-
- `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.
|