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