morphing-scroll 2.5.3 → 2.7.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 +546 -429
- package/cjs/index.js +1 -1
- package/esm/index.js +1 -1
- package/package.json +1 -1
- package/types/index.d.ts +97 -50
- package/types/intersectionTracker.d.ts +27 -31
- package/types/morphScroll.d.ts +157 -165
- package/types/resizeTracker.d.ts +17 -21
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
type IntersectionTrackerT = {
|
|
2
2
|
/**---
|
|
3
|
-
* 
|
|
4
|
-
*
|
|
5
|
-
*
|
|
3
|
+
* ## 
|
|
4
|
+
* ### ***className***:
|
|
5
|
+
* set a custom class name.
|
|
6
6
|
* @example
|
|
7
7
|
* ```tsx
|
|
8
8
|
* <IntersectionTracker
|
|
@@ -14,9 +14,9 @@ type IntersectionTrackerT = {
|
|
|
14
14
|
*/
|
|
15
15
|
className?: string;
|
|
16
16
|
/**---
|
|
17
|
-
* 
|
|
18
|
-
*
|
|
19
|
-
*
|
|
17
|
+
* ## 
|
|
18
|
+
* ### ***children***:
|
|
19
|
+
* add custom user content.
|
|
20
20
|
* @example
|
|
21
21
|
* ```tsx
|
|
22
22
|
* <IntersectionTracker>
|
|
@@ -26,9 +26,9 @@ type IntersectionTrackerT = {
|
|
|
26
26
|
* */
|
|
27
27
|
children?: React.ReactNode;
|
|
28
28
|
/**---
|
|
29
|
-
* 
|
|
30
|
-
*
|
|
31
|
-
*
|
|
29
|
+
* ## 
|
|
30
|
+
* ### ***style***:
|
|
31
|
+
* set custom inline styles.
|
|
32
32
|
* @example
|
|
33
33
|
* ```tsx
|
|
34
34
|
* <IntersectionTracker
|
|
@@ -40,11 +40,10 @@ type IntersectionTrackerT = {
|
|
|
40
40
|
*/
|
|
41
41
|
style?: React.CSSProperties;
|
|
42
42
|
/**---
|
|
43
|
-
* 
|
|
44
|
-
*
|
|
45
|
-
*
|
|
43
|
+
* ## 
|
|
44
|
+
* ### ***root***:
|
|
45
|
+
* root element.
|
|
46
46
|
* @default document viewport
|
|
47
|
-
*
|
|
48
47
|
* @example
|
|
49
48
|
* ```tsx
|
|
50
49
|
* <IntersectionTracker
|
|
@@ -56,12 +55,11 @@ type IntersectionTrackerT = {
|
|
|
56
55
|
*/
|
|
57
56
|
root?: Element | null;
|
|
58
57
|
/**---
|
|
59
|
-
* 
|
|
60
|
-
*
|
|
61
|
-
*
|
|
58
|
+
* ## 
|
|
59
|
+
* ### ***rootMargin***:
|
|
60
|
+
* margin for the root element.
|
|
62
61
|
* @note
|
|
63
|
-
* *It can be
|
|
64
|
-
*
|
|
62
|
+
* *It can be a number or an array of 2 or 4 numbers*
|
|
65
63
|
* @example
|
|
66
64
|
* ```tsx
|
|
67
65
|
* <IntersectionTracker
|
|
@@ -73,12 +71,11 @@ type IntersectionTrackerT = {
|
|
|
73
71
|
*/
|
|
74
72
|
rootMargin?: number | number[];
|
|
75
73
|
/**---
|
|
76
|
-
* 
|
|
77
|
-
*
|
|
78
|
-
*
|
|
74
|
+
* ## 
|
|
75
|
+
* ### ***threshold***:
|
|
76
|
+
* visibility threshold for triggering intersection events.
|
|
79
77
|
* @note
|
|
80
|
-
* *
|
|
81
|
-
*
|
|
78
|
+
* *a value between `0` (out of view) and `1` (fully visible) can be single or an array*
|
|
82
79
|
* @example
|
|
83
80
|
* ```tsx
|
|
84
81
|
* <IntersectionTracker
|
|
@@ -90,11 +87,10 @@ type IntersectionTrackerT = {
|
|
|
90
87
|
*/
|
|
91
88
|
threshold?: number | number[];
|
|
92
89
|
/**---
|
|
93
|
-
* 
|
|
94
|
-
*
|
|
95
|
-
*
|
|
90
|
+
* ## 
|
|
91
|
+
* ### ***visibleContent***:
|
|
92
|
+
* renders children regardless of their visibility in the viewport.
|
|
96
93
|
* @default false
|
|
97
|
-
*
|
|
98
94
|
* @example
|
|
99
95
|
* ```tsx
|
|
100
96
|
* <IntersectionTracker
|
|
@@ -106,10 +102,10 @@ type IntersectionTrackerT = {
|
|
|
106
102
|
*/
|
|
107
103
|
visibleContent?: boolean;
|
|
108
104
|
/**---
|
|
109
|
-
* 
|
|
110
|
-
*
|
|
111
|
-
*
|
|
112
|
-
*
|
|
105
|
+
* ## 
|
|
106
|
+
* ### ***onIntersection***:
|
|
107
|
+
* callback triggered when `threshold` is met.
|
|
108
|
+
* @param entry is the IntersectionObserverEntry object.
|
|
113
109
|
* @example
|
|
114
110
|
* ```tsx
|
|
115
111
|
* <IntersectionTracker
|
package/types/morphScroll.d.ts
CHANGED
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
type MorphScrollT = {
|
|
2
|
-
// General Settings
|
|
2
|
+
// — General Settings —
|
|
3
3
|
/**---
|
|
4
|
-
* 
|
|
5
|
-
*
|
|
6
|
-
*
|
|
4
|
+
* ## 
|
|
5
|
+
* ### ***className***:
|
|
6
|
+
* set a custom class name.
|
|
7
7
|
* @example
|
|
8
8
|
* ```tsx
|
|
9
9
|
* <MorphScroll {...props}
|
|
@@ -15,9 +15,9 @@ type MorphScrollT = {
|
|
|
15
15
|
* */
|
|
16
16
|
className?: string;
|
|
17
17
|
/**---
|
|
18
|
-
* 
|
|
19
|
-
*
|
|
20
|
-
*
|
|
18
|
+
* ## 
|
|
19
|
+
* ### ***children***:
|
|
20
|
+
* add custom user content.
|
|
21
21
|
* @example
|
|
22
22
|
* ```tsx
|
|
23
23
|
* <MorphScroll {...props} >
|
|
@@ -27,13 +27,12 @@ type MorphScrollT = {
|
|
|
27
27
|
* */
|
|
28
28
|
children?: React.ReactNode;
|
|
29
29
|
|
|
30
|
-
// Scroll Settings
|
|
30
|
+
// — Scroll Settings —
|
|
31
31
|
/**---
|
|
32
|
-
* 
|
|
33
|
-
*
|
|
34
|
-
*
|
|
32
|
+
* ## 
|
|
33
|
+
* ### ***type***:
|
|
34
|
+
* change the type of progress element.
|
|
35
35
|
* @default "scroll"
|
|
36
|
-
*
|
|
37
36
|
* @example
|
|
38
37
|
* ```tsx
|
|
39
38
|
* <MorphScroll {...props}
|
|
@@ -45,11 +44,10 @@ type MorphScrollT = {
|
|
|
45
44
|
*/
|
|
46
45
|
type?: "scroll" | "slider" | "sliderMenu";
|
|
47
46
|
/**---
|
|
48
|
-
* 
|
|
49
|
-
*
|
|
50
|
-
*
|
|
47
|
+
* ## 
|
|
48
|
+
* ### ***direction***:
|
|
49
|
+
* change the scrolling direction.
|
|
51
50
|
* @default "y"
|
|
52
|
-
*
|
|
53
51
|
* @example
|
|
54
52
|
* ```tsx
|
|
55
53
|
* <MorphScroll {...props}
|
|
@@ -61,41 +59,40 @@ type MorphScrollT = {
|
|
|
61
59
|
*/
|
|
62
60
|
direction?: "x" | "y" | "hybrid";
|
|
63
61
|
/**---
|
|
64
|
-
* 
|
|
65
|
-
*
|
|
66
|
-
*
|
|
62
|
+
* ## 
|
|
63
|
+
* ### ***scrollPosition***:
|
|
64
|
+
* set the scroll position value and additional options.
|
|
67
65
|
* @default { duration: 200; updater: false }
|
|
68
|
-
*
|
|
69
66
|
* @description
|
|
70
|
-
* - `value`: *
|
|
71
|
-
* - `duration`: *
|
|
72
|
-
* - `updater`: *
|
|
73
|
-
*
|
|
74
|
-
* @note
|
|
75
|
-
* `value` property can be an array of two values for hybrid directions
|
|
76
|
-
*
|
|
67
|
+
* - `value`: *scroll position value*
|
|
68
|
+
* - `duration`: *duration of the scroll animation*
|
|
69
|
+
* - `updater`: *helper to force an update when setting the same scroll value repeatedly*
|
|
70
|
+
* @note `value` property can be an array of two values for hybrid directions
|
|
77
71
|
* @example
|
|
78
72
|
* ```tsx
|
|
79
73
|
* <MorphScroll {...props}
|
|
80
|
-
* scrollPosition={
|
|
74
|
+
* scrollPosition={100}
|
|
81
75
|
* >
|
|
82
76
|
* {children}
|
|
83
77
|
* </MorphScroll>
|
|
84
78
|
* ```
|
|
85
79
|
*/
|
|
86
|
-
scrollPosition?:
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
80
|
+
scrollPosition?:
|
|
81
|
+
| null
|
|
82
|
+
| number
|
|
83
|
+
| "end"
|
|
84
|
+
| (null | number | "end")[]
|
|
85
|
+
| {
|
|
86
|
+
value: null | number | "end" | (null | number | "end")[];
|
|
87
|
+
duration?: number;
|
|
88
|
+
updater?: boolean;
|
|
89
|
+
};
|
|
91
90
|
/**---
|
|
92
|
-
* 
|
|
93
|
-
*
|
|
94
|
-
*
|
|
95
|
-
* @
|
|
96
|
-
*
|
|
97
|
-
* - `top`: *Current scroll position on the y-axis*
|
|
98
|
-
*
|
|
91
|
+
* ## 
|
|
92
|
+
* ### ***onScrollValue***:
|
|
93
|
+
* callback for scroll value.
|
|
94
|
+
* @param left current scroll position on the x-axis.
|
|
95
|
+
* @param top current scroll position on the y-axis.
|
|
99
96
|
* @example
|
|
100
97
|
* ```tsx
|
|
101
98
|
* <MorphScroll {...props}
|
|
@@ -107,13 +104,14 @@ type MorphScrollT = {
|
|
|
107
104
|
*/
|
|
108
105
|
onScrollValue?: (left: number, top: number) => void;
|
|
109
106
|
/**---
|
|
110
|
-
* 
|
|
111
|
-
*
|
|
112
|
-
*
|
|
107
|
+
* ## 
|
|
108
|
+
* ### ***isScrolling***:
|
|
109
|
+
* callback for scroll status.
|
|
110
|
+
* @param motion boolean indicating if scrolling is in progress.
|
|
113
111
|
* @example
|
|
114
112
|
* ```tsx
|
|
115
113
|
* <MorphScroll {...props}
|
|
116
|
-
* isScrolling={(motion) => console.log(motion)}
|
|
114
|
+
* isScrolling={(motion) => console.log("Is scrolling:", motion)}
|
|
117
115
|
* >
|
|
118
116
|
* {children}
|
|
119
117
|
* </MorphScroll>
|
|
@@ -121,13 +119,11 @@ type MorphScrollT = {
|
|
|
121
119
|
*/
|
|
122
120
|
isScrolling?: (motion: boolean) => void;
|
|
123
121
|
|
|
124
|
-
// Visual Settings
|
|
122
|
+
// — Visual Settings —
|
|
125
123
|
/**---
|
|
126
|
-
* 
|
|
127
|
-
*
|
|
128
|
-
*
|
|
129
|
-
* **REQUIRED**
|
|
130
|
-
* ___
|
|
124
|
+
* ## 
|
|
125
|
+
* ### ***size***:
|
|
126
|
+
* width and height dimension of scroll area ( **REQUIRED** ).gt
|
|
131
127
|
* @description
|
|
132
128
|
* - `number` *sets the width and height, can be an array of 2 numbers*
|
|
133
129
|
* - `"auto"` *for automatic resizing based on the parent element*
|
|
@@ -143,11 +139,10 @@ type MorphScrollT = {
|
|
|
143
139
|
*/
|
|
144
140
|
size: number | number[] | "auto";
|
|
145
141
|
/**---
|
|
146
|
-
* 
|
|
147
|
-
*
|
|
148
|
-
*
|
|
149
|
-
* @default
|
|
150
|
-
*
|
|
142
|
+
* ## 
|
|
143
|
+
* ### ***objectsSize***:
|
|
144
|
+
* width and height dimension of cells for each object.
|
|
145
|
+
* @default size prop value
|
|
151
146
|
* @description
|
|
152
147
|
* - `number` *sets the width and height, can be an array of 2 numbers*
|
|
153
148
|
* - `"size"` *all objects will take the dimensions from the `size` prop*
|
|
@@ -170,9 +165,9 @@ type MorphScrollT = {
|
|
|
170
165
|
| "none"
|
|
171
166
|
| (number | "size" | "firstChild" | "none")[];
|
|
172
167
|
/**---
|
|
173
|
-
* 
|
|
174
|
-
*
|
|
175
|
-
*
|
|
168
|
+
* ## 
|
|
169
|
+
* ### ***crossCount***:
|
|
170
|
+
* number of cells in each direction.
|
|
176
171
|
* @example
|
|
177
172
|
* ```tsx
|
|
178
173
|
* <MorphScroll {...props}
|
|
@@ -184,12 +179,11 @@ type MorphScrollT = {
|
|
|
184
179
|
*/
|
|
185
180
|
crossCount?: number;
|
|
186
181
|
/**---
|
|
187
|
-
* 
|
|
188
|
-
*
|
|
189
|
-
*
|
|
182
|
+
* ## 
|
|
183
|
+
* ### ***gap***:
|
|
184
|
+
* gap between cells.
|
|
190
185
|
* @note
|
|
191
|
-
* *It can be
|
|
192
|
-
*
|
|
186
|
+
* *It can be a number or an array of 2 or 4 numbers*
|
|
193
187
|
* @example
|
|
194
188
|
* ```tsx
|
|
195
189
|
* <MorphScroll {...props}
|
|
@@ -201,12 +195,11 @@ type MorphScrollT = {
|
|
|
201
195
|
*/
|
|
202
196
|
gap?: number | number[];
|
|
203
197
|
/**---
|
|
204
|
-
* 
|
|
205
|
-
*
|
|
206
|
-
*
|
|
198
|
+
* ## 
|
|
199
|
+
* ### ***wrapperMargin***:
|
|
200
|
+
* margin for the `.ms-objects-wrapper` element.
|
|
207
201
|
* @note
|
|
208
|
-
* *It can be
|
|
209
|
-
*
|
|
202
|
+
* *It can be a number or an array of 2 or 4 numbers*
|
|
210
203
|
* @example
|
|
211
204
|
* ```tsx
|
|
212
205
|
* <MorphScroll {...props}
|
|
@@ -218,16 +211,14 @@ type MorphScrollT = {
|
|
|
218
211
|
*/
|
|
219
212
|
wrapperMargin?: number | number[];
|
|
220
213
|
/**---
|
|
221
|
-
* 
|
|
222
|
-
*
|
|
223
|
-
*
|
|
214
|
+
* ## 
|
|
215
|
+
* ### ***wrapperMinSize***:
|
|
216
|
+
* minimum height or width of the `.ms-objects-wrapper` element.
|
|
224
217
|
* @description
|
|
225
218
|
* - `number` *sets the min-size*
|
|
226
219
|
* - `"full"` *min-size is equal to property `size`*
|
|
227
|
-
*
|
|
228
220
|
* @note
|
|
229
|
-
* - *Can be used as 1 value, or an array of 2 values for
|
|
230
|
-
*
|
|
221
|
+
* - *Can be used as 1 value, or an array of 2 values for width and height.*
|
|
231
222
|
* @example
|
|
232
223
|
* ```tsx
|
|
233
224
|
* <MorphScroll {...props}
|
|
@@ -239,16 +230,15 @@ type MorphScrollT = {
|
|
|
239
230
|
*/
|
|
240
231
|
wrapperMinSize?: number | "full" | (number | "full")[];
|
|
241
232
|
/**---
|
|
242
|
-
* 
|
|
243
|
-
*
|
|
244
|
-
*
|
|
233
|
+
* ## 
|
|
234
|
+
* ### ***wrapperAlign***:
|
|
235
|
+
* horizontal and vertical aligns your content when it is smaller than the `size`.
|
|
245
236
|
* @note
|
|
246
237
|
* *Use 1 value to align one or both axes, or an array of 2 values to align both axes*
|
|
247
|
-
*
|
|
248
238
|
* @example
|
|
249
239
|
* ```tsx
|
|
250
240
|
* <MorphScroll {...props}
|
|
251
|
-
* wrapperAlign=
|
|
241
|
+
* wrapperAlign="center"
|
|
252
242
|
* >
|
|
253
243
|
* {children}
|
|
254
244
|
* </MorphScroll>
|
|
@@ -256,13 +246,13 @@ type MorphScrollT = {
|
|
|
256
246
|
*/
|
|
257
247
|
wrapperAlign?: "start" | "center" | "end" | ("start" | "center" | "end")[];
|
|
258
248
|
/**---
|
|
259
|
-
* 
|
|
260
|
-
*
|
|
261
|
-
*
|
|
249
|
+
* ## 
|
|
250
|
+
* ### ***elementsAlign***:
|
|
251
|
+
* aligns the objects inside `MorphScroll`.
|
|
262
252
|
* @example
|
|
263
253
|
* ```tsx
|
|
264
254
|
* <MorphScroll {...props}
|
|
265
|
-
* elementsAlign=
|
|
255
|
+
* elementsAlign="center"
|
|
266
256
|
* >
|
|
267
257
|
* {children}
|
|
268
258
|
* </MorphScroll>
|
|
@@ -270,15 +260,14 @@ type MorphScrollT = {
|
|
|
270
260
|
*/
|
|
271
261
|
elementsAlign?: "start" | "center" | "end";
|
|
272
262
|
/**---
|
|
273
|
-
* 
|
|
274
|
-
*
|
|
275
|
-
*
|
|
263
|
+
* ## 
|
|
264
|
+
* ### ***elementsDirection***:
|
|
265
|
+
* direction of the provided elements.
|
|
276
266
|
* @default "row"
|
|
277
|
-
*
|
|
278
267
|
* @example
|
|
279
268
|
* ```tsx
|
|
280
269
|
* <MorphScroll {...props}
|
|
281
|
-
* elementsDirection=
|
|
270
|
+
* elementsDirection="column"
|
|
282
271
|
* >
|
|
283
272
|
* {children}
|
|
284
273
|
* </MorphScroll>
|
|
@@ -286,37 +275,33 @@ type MorphScrollT = {
|
|
|
286
275
|
*/
|
|
287
276
|
elementsDirection?: "row" | "column";
|
|
288
277
|
/**---
|
|
289
|
-
* 
|
|
290
|
-
*
|
|
291
|
-
*
|
|
278
|
+
* ## 
|
|
279
|
+
* ### ***edgeGradient***:
|
|
280
|
+
* gradient overlay at the edges of the scroll area.
|
|
292
281
|
* @default { size: 40 }
|
|
293
|
-
*
|
|
294
282
|
* @example
|
|
295
283
|
* ```tsx
|
|
296
284
|
* <MorphScroll {...props}
|
|
297
|
-
* edgeGradient=
|
|
285
|
+
* edgeGradient="rgba(0,0,0,0.4)"
|
|
298
286
|
* >
|
|
299
287
|
* {children}
|
|
300
288
|
* </MorphScroll>
|
|
301
289
|
* ```
|
|
302
290
|
*/
|
|
303
|
-
edgeGradient?: boolean | { color?: string; size?: number };
|
|
304
|
-
|
|
305
|
-
// Progress Bar
|
|
291
|
+
edgeGradient?: boolean | string | { color?: string; size?: number };
|
|
306
292
|
/**---
|
|
307
|
-
* 
|
|
308
|
-
*
|
|
309
|
-
*
|
|
293
|
+
* ## 
|
|
294
|
+
* ### ***progressTrigger***:
|
|
295
|
+
* triggers for the scroll progress.
|
|
310
296
|
* @description
|
|
311
|
-
* - `wheel`: *
|
|
312
|
-
* - `content`: *
|
|
313
|
-
* - `progressElement`: *
|
|
314
|
-
* - `arrows`: *
|
|
315
|
-
*
|
|
297
|
+
* - `wheel`: *allow to scroll by mouse wheel*
|
|
298
|
+
* - `content`: *allow to scroll by content drag*
|
|
299
|
+
* - `progressElement`: *add custom progress element*
|
|
300
|
+
* - `arrows`: *add custom arrows*
|
|
316
301
|
* @note
|
|
317
302
|
* - *`progressElement` can be thumb or slider, use props `type`*
|
|
318
|
-
* - *
|
|
319
|
-
*
|
|
303
|
+
* - *if `progressElement` is `true` and `type` is `"scroll"`, the default browser scroll element will be used*
|
|
304
|
+
* - *by using `content` drag scrolling will not work with interactive elements like button ([more...](https://www.npmjs.com/package/morphing-scroll))*
|
|
320
305
|
* @example
|
|
321
306
|
* ```tsx
|
|
322
307
|
* <MorphScroll {...props}
|
|
@@ -331,18 +316,24 @@ type MorphScrollT = {
|
|
|
331
316
|
| boolean
|
|
332
317
|
| { changeDirection?: boolean; changeDirectionKey?: string };
|
|
333
318
|
content?: boolean;
|
|
334
|
-
progressElement?: boolean | React.ReactNode;
|
|
335
|
-
arrows?:
|
|
319
|
+
progressElement?: boolean | React.ReactNode | React.ReactNode[];
|
|
320
|
+
arrows?:
|
|
321
|
+
| boolean
|
|
322
|
+
| React.ReactNode
|
|
323
|
+
| {
|
|
324
|
+
element?: React.ReactNode;
|
|
325
|
+
size?: number;
|
|
326
|
+
contentReduce?: boolean;
|
|
327
|
+
loop?: boolean;
|
|
328
|
+
};
|
|
336
329
|
};
|
|
337
330
|
/**---
|
|
338
|
-
* 
|
|
339
|
-
*
|
|
340
|
-
*
|
|
331
|
+
* ## 
|
|
332
|
+
* ### ***progressReverse***:
|
|
333
|
+
* reverse your progress bar position.
|
|
341
334
|
* @default false
|
|
342
|
-
*
|
|
343
335
|
* @note
|
|
344
|
-
* *
|
|
345
|
-
*
|
|
336
|
+
* *use 1 boolean or an array of 2 booleans to set different values for hybrid `direction`*
|
|
346
337
|
* @example
|
|
347
338
|
* ```tsx
|
|
348
339
|
* <MorphScroll {...props}
|
|
@@ -354,15 +345,14 @@ type MorphScrollT = {
|
|
|
354
345
|
*/
|
|
355
346
|
progressReverse?: boolean | boolean[];
|
|
356
347
|
/**---
|
|
357
|
-
* 
|
|
358
|
-
*
|
|
359
|
-
*
|
|
348
|
+
* ## 
|
|
349
|
+
* ### ***scrollBarOnHover***:
|
|
350
|
+
* progress bar hover visibility.
|
|
360
351
|
* @default false
|
|
361
|
-
*
|
|
362
352
|
* @example
|
|
363
353
|
* ```tsx
|
|
364
354
|
* <MorphScroll {...props}
|
|
365
|
-
* progressVisibility=
|
|
355
|
+
* progressVisibility="hover"
|
|
366
356
|
* >
|
|
367
357
|
* {children}
|
|
368
358
|
* </MorphScroll>
|
|
@@ -370,13 +360,12 @@ type MorphScrollT = {
|
|
|
370
360
|
*/
|
|
371
361
|
scrollBarOnHover?: boolean;
|
|
372
362
|
/**---
|
|
373
|
-
* 
|
|
374
|
-
*
|
|
375
|
-
*
|
|
363
|
+
* ## 
|
|
364
|
+
* ### ***scrollBarEdge***:
|
|
365
|
+
* scroll bar margin at its edges.
|
|
376
366
|
* @note
|
|
377
367
|
* - *Used when: `type="scroll"`*
|
|
378
368
|
* - *When `direction="hybrid"` you can set an array of values*
|
|
379
|
-
*
|
|
380
369
|
* @example
|
|
381
370
|
* ```tsx
|
|
382
371
|
* <MorphScroll {...props}
|
|
@@ -388,12 +377,11 @@ type MorphScrollT = {
|
|
|
388
377
|
*/
|
|
389
378
|
scrollBarEdge?: number | number[];
|
|
390
379
|
/**---
|
|
391
|
-
* 
|
|
392
|
-
*
|
|
393
|
-
*
|
|
380
|
+
* ## 
|
|
381
|
+
* ### ***thumbMinSize***:
|
|
382
|
+
* scroll bar thumb minimum size.
|
|
394
383
|
* @note
|
|
395
384
|
* *Used when: `type="scroll"`*
|
|
396
|
-
*
|
|
397
385
|
* @example
|
|
398
386
|
* ```tsx
|
|
399
387
|
* <MorphScroll {...props}
|
|
@@ -405,63 +393,67 @@ type MorphScrollT = {
|
|
|
405
393
|
*/
|
|
406
394
|
thumbMinSize?: number;
|
|
407
395
|
|
|
408
|
-
// Optimization
|
|
396
|
+
// — Optimization —
|
|
409
397
|
/**---
|
|
410
|
-
* 
|
|
411
|
-
*
|
|
412
|
-
*
|
|
413
|
-
* @
|
|
414
|
-
* - `
|
|
415
|
-
*
|
|
416
|
-
*
|
|
417
|
-
* - `
|
|
418
|
-
*
|
|
398
|
+
* ## 
|
|
399
|
+
* ### ***render***:
|
|
400
|
+
* rendering strategy for performance optimization.
|
|
401
|
+
* @descriptions
|
|
402
|
+
* - `type` — determines the render strategy:
|
|
403
|
+
* - `"lazy"`: *render once when visible*
|
|
404
|
+
* - `"virtual"`: *render only when visible*
|
|
405
|
+
* - `rootMargin`: *distance for loading from the root element*
|
|
406
|
+
* - `stopLoadOnScroll`: *stops loading content when scrolling*
|
|
407
|
+
* - `trackVisibility`: *sets the `--content-visibility` variable*
|
|
419
408
|
* @note
|
|
420
409
|
* *`render` is not compatible with `objectsSize: "none"`*
|
|
421
|
-
*
|
|
422
410
|
* @example
|
|
423
411
|
* ```tsx
|
|
424
412
|
* <MorphScroll {...props}
|
|
425
|
-
* render=
|
|
413
|
+
* render="lazy"
|
|
426
414
|
* >
|
|
427
415
|
* {children}
|
|
428
416
|
* </MorphScroll>
|
|
429
417
|
* ```
|
|
430
418
|
*/
|
|
431
|
-
render?:
|
|
432
|
-
|
|
433
|
-
|
|
434
|
-
|
|
435
|
-
|
|
419
|
+
render?:
|
|
420
|
+
| "lazy"
|
|
421
|
+
| "virtual"
|
|
422
|
+
| {
|
|
423
|
+
type: "lazy" | "virtual";
|
|
424
|
+
rootMargin?: number | number[];
|
|
425
|
+
stopLoadOnScroll?: boolean;
|
|
426
|
+
trackVisibility?: boolean;
|
|
427
|
+
};
|
|
436
428
|
/**---
|
|
437
|
-
* 
|
|
438
|
-
*
|
|
439
|
-
*
|
|
429
|
+
* ## 
|
|
430
|
+
* ### ***emptyElements***:
|
|
431
|
+
* handling of empty scroll elements.
|
|
440
432
|
* @description
|
|
441
|
-
* - `"clear"`: *
|
|
442
|
-
* - `fallback`: *
|
|
443
|
-
* - `clickTrigger`: *
|
|
444
|
-
*
|
|
433
|
+
* - `"clear"`: *removes empty elements from the DOM*
|
|
434
|
+
* - `fallback`: *replaces empty elements with a fallback element*
|
|
435
|
+
* - `clickTrigger`: *start clearing elements when passed selector is clicked*
|
|
445
436
|
* @example
|
|
446
437
|
* ```tsx
|
|
447
438
|
* <MorphScroll {...props}
|
|
448
|
-
* emptyElements=
|
|
449
|
-
* mode: "clear",
|
|
450
|
-
* clickTrigger: { selector: ".close-button" }
|
|
451
|
-
* }}
|
|
439
|
+
* emptyElements="clear"
|
|
452
440
|
* >
|
|
453
441
|
* {children}
|
|
454
442
|
* </MorphScroll>
|
|
455
443
|
* ```
|
|
456
444
|
*/
|
|
457
|
-
emptyElements?:
|
|
458
|
-
|
|
459
|
-
|
|
460
|
-
|
|
445
|
+
emptyElements?:
|
|
446
|
+
| "clear"
|
|
447
|
+
| "fallback"
|
|
448
|
+
| React.ReactNode
|
|
449
|
+
| {
|
|
450
|
+
mode: "clear" | "fallback" | { fallback: React.ReactNode };
|
|
451
|
+
clickTrigger?: string | { selector: string; delay?: number };
|
|
452
|
+
};
|
|
461
453
|
/**---
|
|
462
|
-
* 
|
|
463
|
-
*
|
|
464
|
-
*
|
|
454
|
+
* ## 
|
|
455
|
+
* ### ***suspending***:
|
|
456
|
+
* enables React Suspense for children.
|
|
465
457
|
* @example
|
|
466
458
|
* ```tsx
|
|
467
459
|
* <MorphScroll {...props}
|
|
@@ -473,9 +465,9 @@ type MorphScrollT = {
|
|
|
473
465
|
*/
|
|
474
466
|
suspending?: boolean;
|
|
475
467
|
/**---
|
|
476
|
-
* 
|
|
477
|
-
*
|
|
478
|
-
*
|
|
468
|
+
* ## 
|
|
469
|
+
* ### ***fallback***:
|
|
470
|
+
* element to display during loading or placeholder.
|
|
479
471
|
* @note
|
|
480
472
|
* *Used when:*
|
|
481
473
|
* - *`suspending === true`*
|