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