morphing-scroll 1.5.19 → 1.5.20
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 +100 -36
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -38,7 +38,7 @@ npm install morphing-scroll
|
|
|
38
38
|
#### GENERAL SETTINGS:
|
|
39
39
|
|
|
40
40
|
<details>
|
|
41
|
-
<summary><strong><code>className</code></strong
|
|
41
|
+
<summary><strong><code>className</code></strong>: <em>Additional classes for the component.</em></summary><br />
|
|
42
42
|
<ul>
|
|
43
43
|
<strong>Type:</strong> string<br />
|
|
44
44
|
<br />
|
|
@@ -57,10 +57,10 @@ npm install morphing-scroll
|
|
|
57
57
|
```
|
|
58
58
|
|
|
59
59
|
</ul>
|
|
60
|
-
</details
|
|
61
|
-
|
|
60
|
+
</details>
|
|
61
|
+
<h2></h2>
|
|
62
62
|
<details>
|
|
63
|
-
<summary><strong><code>children</code></strong
|
|
63
|
+
<summary><strong><code>children</code></strong>: <em>Custom user content.</em></summary><br />
|
|
64
64
|
<ul>
|
|
65
65
|
<strong>Type:</strong> React.ReactNode<br />
|
|
66
66
|
<br />
|
|
@@ -82,10 +82,12 @@ npm install morphing-scroll
|
|
|
82
82
|
</ul>
|
|
83
83
|
</details>
|
|
84
84
|
|
|
85
|
+
<h2></h2>
|
|
86
|
+
|
|
85
87
|
#### SCROLL SETTINGS:
|
|
86
88
|
|
|
87
89
|
<details>
|
|
88
|
-
<summary><strong><code>type</code></strong
|
|
90
|
+
<summary><strong><code>type</code></strong>: <em>Type of progress element.</em></summary><br />
|
|
89
91
|
<ul>
|
|
90
92
|
<strong>Type:</strong> "scroll" | "slider"<br />
|
|
91
93
|
<br />
|
|
@@ -110,8 +112,10 @@ npm install morphing-scroll
|
|
|
110
112
|
</ul>
|
|
111
113
|
</details>
|
|
112
114
|
|
|
115
|
+
<h2></h2>
|
|
116
|
+
|
|
113
117
|
<details>
|
|
114
|
-
<summary><strong><code>direction</code></strong
|
|
118
|
+
<summary><strong><code>direction</code></strong>: <em>Scrolling direction.</em></summary><br />
|
|
115
119
|
<ul>
|
|
116
120
|
<strong>Type:</strong> "x" | "y"<br />
|
|
117
121
|
<br />
|
|
@@ -135,8 +139,10 @@ npm install morphing-scroll
|
|
|
135
139
|
</ul>
|
|
136
140
|
</details>
|
|
137
141
|
|
|
142
|
+
<h2></h2>
|
|
143
|
+
|
|
138
144
|
<details>
|
|
139
|
-
<summary><strong><code>scrollTop</code></strong
|
|
145
|
+
<summary><strong><code>scrollTop</code></strong>: <em>Scroll position and animation duration.</em></summary><br />
|
|
140
146
|
<ul>
|
|
141
147
|
<strong>Type:</strong> {<br />
|
|
142
148
|
value: number | "end";<br />
|
|
@@ -171,8 +177,10 @@ npm install morphing-scroll
|
|
|
171
177
|
</ul>
|
|
172
178
|
</details>
|
|
173
179
|
|
|
180
|
+
<h2></h2>
|
|
181
|
+
|
|
174
182
|
<details>
|
|
175
|
-
<summary><strong><code>stopLoadOnScroll</code></strong
|
|
183
|
+
<summary><strong><code>stopLoadOnScroll</code></strong>: <em>Stop loading when scrolling.</em></summary><br />
|
|
176
184
|
<ul>
|
|
177
185
|
<strong>Type:</strong> boolean<br />
|
|
178
186
|
<br />
|
|
@@ -195,8 +203,10 @@ npm install morphing-scroll
|
|
|
195
203
|
</ul>
|
|
196
204
|
</details>
|
|
197
205
|
|
|
206
|
+
<h2></h2>
|
|
207
|
+
|
|
198
208
|
<details>
|
|
199
|
-
<summary><strong><code>onScrollValue</code></strong
|
|
209
|
+
<summary><strong><code>onScrollValue</code></strong>: <em>Callback for scroll value.</em></summary><br />
|
|
200
210
|
<ul>
|
|
201
211
|
<strong>Type:</strong> (scroll: number) => void<br />
|
|
202
212
|
<br />
|
|
@@ -222,8 +232,10 @@ npm install morphing-scroll
|
|
|
222
232
|
</ul>
|
|
223
233
|
</details>
|
|
224
234
|
|
|
235
|
+
<h2></h2>
|
|
236
|
+
|
|
225
237
|
<details>
|
|
226
|
-
<summary><strong><code>isScrolling</code></strong
|
|
238
|
+
<summary><strong><code>isScrolling</code></strong>: <em>Callback function for scroll status.</em></summary><br />
|
|
227
239
|
<ul>
|
|
228
240
|
<strong>Type:</strong> (motion: boolean) => void<br />
|
|
229
241
|
<br />
|
|
@@ -246,10 +258,12 @@ npm install morphing-scroll
|
|
|
246
258
|
</ul>
|
|
247
259
|
</details>
|
|
248
260
|
|
|
261
|
+
<h2></h2>
|
|
262
|
+
|
|
249
263
|
#### VISUAL SETTINGS:
|
|
250
264
|
|
|
251
265
|
<details>
|
|
252
|
-
<summary><strong><code>size</code></strong
|
|
266
|
+
<summary><strong><code>size</code></strong>: <em>MorphScroll width and height.</em></summary><br />
|
|
253
267
|
<ul>
|
|
254
268
|
<strong>Type:</strong> number[]<br />
|
|
255
269
|
<br />
|
|
@@ -278,8 +292,10 @@ npm install morphing-scroll
|
|
|
278
292
|
</ul>
|
|
279
293
|
</details>
|
|
280
294
|
|
|
295
|
+
<h2></h2>
|
|
296
|
+
|
|
281
297
|
<details>
|
|
282
|
-
<summary><strong><code>objectsSize</code> (required)</strong
|
|
298
|
+
<summary><strong><code>objectsSize</code> (required)</strong>: <em>Required: Size of cells for each object.</em></summary><br />
|
|
283
299
|
<ul>
|
|
284
300
|
<strong>Type:</strong> (number | "none" | "firstChild")[]<br />
|
|
285
301
|
<br />
|
|
@@ -309,8 +325,10 @@ npm install morphing-scroll
|
|
|
309
325
|
</ul>
|
|
310
326
|
</details>
|
|
311
327
|
|
|
328
|
+
<h2></h2>
|
|
329
|
+
|
|
312
330
|
<details>
|
|
313
|
-
<summary><strong><code>gap</code></strong
|
|
331
|
+
<summary><strong><code>gap</code></strong>: <em>Gap between cells.</em></summary><br />
|
|
314
332
|
<ul>
|
|
315
333
|
<strong>Type:</strong> number[] | number<br />
|
|
316
334
|
<br />
|
|
@@ -335,8 +353,10 @@ npm install morphing-scroll
|
|
|
335
353
|
</ul>
|
|
336
354
|
</details>
|
|
337
355
|
|
|
356
|
+
<h2></h2>
|
|
357
|
+
|
|
338
358
|
<details>
|
|
339
|
-
<summary><strong><code>padding</code></strong
|
|
359
|
+
<summary><strong><code>padding</code></strong>: <em>Padding for the <code>objectsWrapper</code>.</em></summary><br />
|
|
340
360
|
<ul>
|
|
341
361
|
<strong>Type:</strong> number[] | number<br />
|
|
342
362
|
<br />
|
|
@@ -372,8 +392,10 @@ npm install morphing-scroll
|
|
|
372
392
|
</ul>
|
|
373
393
|
</details>
|
|
374
394
|
|
|
395
|
+
<h2></h2>
|
|
396
|
+
|
|
375
397
|
<details>
|
|
376
|
-
<summary><strong><code>contentAlign</code></strong
|
|
398
|
+
<summary><strong><code>contentAlign</code></strong>: <em>Aligns the content when it is smaller than the MorphScroll <code>size</code>.</em></summary><br />
|
|
377
399
|
<ul>
|
|
378
400
|
<strong>Type:</strong> [<br />
|
|
379
401
|
"start" | "center" | "end",<br />
|
|
@@ -404,8 +426,10 @@ npm install morphing-scroll
|
|
|
404
426
|
</ul>
|
|
405
427
|
</details>
|
|
406
428
|
|
|
429
|
+
<h2></h2>
|
|
430
|
+
|
|
407
431
|
<details>
|
|
408
|
-
<summary><strong><code>elementsAlign</code></strong
|
|
432
|
+
<summary><strong><code>elementsAlign</code></strong>: <em>Aligns the objects within the <code>objectsWrapper</code>.</em></summary><br />
|
|
409
433
|
<ul>
|
|
410
434
|
<strong>Type:</strong> "start" | "center" | "end"<br />
|
|
411
435
|
<br />
|
|
@@ -423,8 +447,10 @@ npm install morphing-scroll
|
|
|
423
447
|
</ul>
|
|
424
448
|
</details>
|
|
425
449
|
|
|
450
|
+
<h2></h2>
|
|
451
|
+
|
|
426
452
|
<details>
|
|
427
|
-
<summary><strong><code>edgeGradient</code></strong
|
|
453
|
+
<summary><strong><code>edgeGradient</code></strong>: <em>Gradient when scrolling overflows.</em></summary><br />
|
|
428
454
|
<ul>
|
|
429
455
|
<strong>Type:</strong> boolean | { color?: string; size?: number }<br />
|
|
430
456
|
<br />
|
|
@@ -454,8 +480,10 @@ npm install morphing-scroll
|
|
|
454
480
|
</ul>
|
|
455
481
|
</details>
|
|
456
482
|
|
|
483
|
+
<h2></h2>
|
|
484
|
+
|
|
457
485
|
<details>
|
|
458
|
-
<summary><strong><code>progressReverse</code></strong
|
|
486
|
+
<summary><strong><code>progressReverse</code></strong>: <em>Reverse the progress bar position.</em></summary><br />
|
|
459
487
|
<ul>
|
|
460
488
|
<strong>Type:</strong> boolean<br />
|
|
461
489
|
<br />
|
|
@@ -482,8 +510,10 @@ npm install morphing-scroll
|
|
|
482
510
|
</ul>
|
|
483
511
|
</details>
|
|
484
512
|
|
|
513
|
+
<h2></h2>
|
|
514
|
+
|
|
485
515
|
<details>
|
|
486
|
-
<summary><strong><code>progressVisibility</code></strong
|
|
516
|
+
<summary><strong><code>progressVisibility</code></strong>: <em>Visibility of the progress bar.</em></summary><br />
|
|
487
517
|
<ul>
|
|
488
518
|
<strong>Type:</strong> "visible" | "hover" | "hidden"<br />
|
|
489
519
|
<br />
|
|
@@ -506,8 +536,10 @@ npm install morphing-scroll
|
|
|
506
536
|
</ul>
|
|
507
537
|
</details>
|
|
508
538
|
|
|
539
|
+
<h2></h2>
|
|
540
|
+
|
|
509
541
|
<details>
|
|
510
|
-
<summary><strong><code>objectsWrapFullMinSize</code></strong
|
|
542
|
+
<summary><strong><code>objectsWrapFullMinSize</code></strong>: <em>Sets the <code>min-height</code> CSS property of the <code>objectsWrapper</code> to match the height of the MorphScroll.</em></summary><br />
|
|
511
543
|
<ul>
|
|
512
544
|
<strong>Type:</strong> boolean<br /><br />
|
|
513
545
|
<strong>Default:</strong> false<br /><br />
|
|
@@ -528,10 +560,12 @@ npm install morphing-scroll
|
|
|
528
560
|
</ul>
|
|
529
561
|
</details>
|
|
530
562
|
|
|
563
|
+
<h2></h2>
|
|
564
|
+
|
|
531
565
|
#### PROGRESS AND RENDERING:
|
|
532
566
|
|
|
533
567
|
<details>
|
|
534
|
-
<summary><strong><code>progressTrigger</code></strong
|
|
568
|
+
<summary><strong><code>progressTrigger</code></strong>: <em>Triggers for the progress bar.</em></summary><br />
|
|
535
569
|
<ul>
|
|
536
570
|
<strong>Type:</strong> {<br />
|
|
537
571
|
wheel?: boolean;<br />
|
|
@@ -569,8 +603,10 @@ npm install morphing-scroll
|
|
|
569
603
|
</ul>
|
|
570
604
|
</details>
|
|
571
605
|
|
|
606
|
+
<h2></h2>
|
|
607
|
+
|
|
572
608
|
<details>
|
|
573
|
-
<summary><strong><code>render</code></strong
|
|
609
|
+
<summary><strong><code>render</code></strong>: <em>Types of rendering for optimization.</em></summary><br />
|
|
574
610
|
<ul>
|
|
575
611
|
<strong>Type:</strong><br />
|
|
576
612
|
| { type: "default" }<br />
|
|
@@ -620,8 +656,10 @@ npm install morphing-scroll
|
|
|
620
656
|
</ul>
|
|
621
657
|
</details>
|
|
622
658
|
|
|
659
|
+
<h2></h2>
|
|
660
|
+
|
|
623
661
|
<details>
|
|
624
|
-
<summary><strong><code>emptyElements</code></strong
|
|
662
|
+
<summary><strong><code>emptyElements</code></strong>: <em>Handling of empty scroll elements.</em></summary><br />
|
|
625
663
|
<ul>
|
|
626
664
|
<strong>Type:</strong><br />
|
|
627
665
|
| {
|
|
@@ -670,8 +708,10 @@ npm install morphing-scroll
|
|
|
670
708
|
</ul>
|
|
671
709
|
</details>
|
|
672
710
|
|
|
711
|
+
<h2></h2>
|
|
712
|
+
|
|
673
713
|
<details>
|
|
674
|
-
<summary><strong><code>suspending</code></strong
|
|
714
|
+
<summary><strong><code>suspending</code></strong>: <em>Adds React Suspense.</em></summary><br />
|
|
675
715
|
<ul>
|
|
676
716
|
<strong>Type:</strong> boolean<br />
|
|
677
717
|
<br />
|
|
@@ -694,8 +734,10 @@ npm install morphing-scroll
|
|
|
694
734
|
</ul>
|
|
695
735
|
</details>
|
|
696
736
|
|
|
737
|
+
<h2></h2>
|
|
738
|
+
|
|
697
739
|
<details>
|
|
698
|
-
<summary><strong><code>fallback</code></strong
|
|
740
|
+
<summary><strong><code>fallback</code></strong>: <em>Fallback element.</em></summary><br />
|
|
699
741
|
<ul>
|
|
700
742
|
<strong>Type:</strong> React.ReactNode<br />
|
|
701
743
|
<br />
|
|
@@ -725,7 +767,7 @@ npm install morphing-scroll
|
|
|
725
767
|
- ### Props:
|
|
726
768
|
|
|
727
769
|
<details>
|
|
728
|
-
<summary><strong><code>children</code></strong
|
|
770
|
+
<summary><strong><code>children</code></strong>: <em>Render-prop function for size updates and adding content.</em></summary><br />
|
|
729
771
|
<ul>
|
|
730
772
|
<strong>Type:</strong> (rect: DOMRectReadOnly) => React.ReactNode<br />
|
|
731
773
|
<br />
|
|
@@ -764,8 +806,10 @@ npm install morphing-scroll
|
|
|
764
806
|
|
|
765
807
|
</details>
|
|
766
808
|
|
|
809
|
+
<h2></h2>
|
|
810
|
+
|
|
767
811
|
<details>
|
|
768
|
-
<summary><strong><code>style</code></strong
|
|
812
|
+
<summary><strong><code>style</code></strong>: <em>Applies inline styles to the container.</em></summary><br />
|
|
769
813
|
<ul>
|
|
770
814
|
<strong>Type:</strong> React.CSSProperties<br />
|
|
771
815
|
<br />
|
|
@@ -783,8 +827,10 @@ npm install morphing-scroll
|
|
|
783
827
|
|
|
784
828
|
</details>
|
|
785
829
|
|
|
830
|
+
<h2></h2>
|
|
831
|
+
|
|
786
832
|
<details>
|
|
787
|
-
<summary><strong><code>measure</code></strong
|
|
833
|
+
<summary><strong><code>measure</code></strong>: <em>Defines the measurement strategy.</em></summary><br />
|
|
788
834
|
<ul>
|
|
789
835
|
<strong>Type:</strong> "inner" | "outer" | "all"<br />
|
|
790
836
|
<br />
|
|
@@ -813,8 +859,10 @@ npm install morphing-scroll
|
|
|
813
859
|
|
|
814
860
|
</details>
|
|
815
861
|
|
|
862
|
+
<h2></h2>
|
|
863
|
+
|
|
816
864
|
<details>
|
|
817
|
-
<summary><strong><code>onResize</code></strong
|
|
865
|
+
<summary><strong><code>onResize</code></strong>: <em>Callback triggered on size changes.</em></summary><br />
|
|
818
866
|
<ul>
|
|
819
867
|
<strong>Type:</strong> (rect: Partial<DOMRectReadOnly>) => void<br />
|
|
820
868
|
<br />
|
|
@@ -840,6 +888,8 @@ npm install morphing-scroll
|
|
|
840
888
|
|
|
841
889
|
</details>
|
|
842
890
|
|
|
891
|
+
<h2></h2>
|
|
892
|
+
|
|
843
893
|
- ### Link:
|
|
844
894
|
|
|
845
895
|
[IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
|
|
@@ -853,7 +903,7 @@ npm install morphing-scroll
|
|
|
853
903
|
- ### Props:
|
|
854
904
|
|
|
855
905
|
<details>
|
|
856
|
-
<summary><strong><code>children</code></strong
|
|
906
|
+
<summary><strong><code>children</code></strong>: <em>Custom user content.</em></summary><br />
|
|
857
907
|
<ul>
|
|
858
908
|
<strong>Type:</strong> React.ReactNode<br />
|
|
859
909
|
<br />
|
|
@@ -867,8 +917,10 @@ npm install morphing-scroll
|
|
|
867
917
|
|
|
868
918
|
</details>
|
|
869
919
|
|
|
920
|
+
<h2></h2>
|
|
921
|
+
|
|
870
922
|
<details>
|
|
871
|
-
<summary><strong><code>style</code></strong
|
|
923
|
+
<summary><strong><code>style</code></strong>: <em>Applies inline styles to the container.</em></summary><br />
|
|
872
924
|
<ul>
|
|
873
925
|
<strong>Type:</strong> React.CSSProperties<br />
|
|
874
926
|
<br />
|
|
@@ -884,8 +936,10 @@ npm install morphing-scroll
|
|
|
884
936
|
|
|
885
937
|
</details>
|
|
886
938
|
|
|
939
|
+
<h2></h2>
|
|
940
|
+
|
|
887
941
|
<details>
|
|
888
|
-
<summary><strong><code>root</code></strong
|
|
942
|
+
<summary><strong><code>root</code></strong>: <em>Defines the observation area.</em></summary><br />
|
|
889
943
|
<ul>
|
|
890
944
|
<strong>Type:</strong> Element | null<br />
|
|
891
945
|
<br />
|
|
@@ -909,8 +963,10 @@ npm install morphing-scroll
|
|
|
909
963
|
|
|
910
964
|
</details>
|
|
911
965
|
|
|
966
|
+
<h2></h2>
|
|
967
|
+
|
|
912
968
|
<details>
|
|
913
|
-
<summary><strong><code>rootMargin</code></strong
|
|
969
|
+
<summary><strong><code>rootMargin</code></strong>: <em>Sets the margin around the root element.</em></summary><br />
|
|
914
970
|
<ul>
|
|
915
971
|
<strong>Type:</strong> number | number[]<br />
|
|
916
972
|
<br />
|
|
@@ -942,8 +998,10 @@ npm install morphing-scroll
|
|
|
942
998
|
|
|
943
999
|
</details>
|
|
944
1000
|
|
|
1001
|
+
<h2></h2>
|
|
1002
|
+
|
|
945
1003
|
<details>
|
|
946
|
-
<summary><strong><code>threshold</code></strong
|
|
1004
|
+
<summary><strong><code>threshold</code></strong>: <em>Defines when the callback is triggered.</em></summary><br />
|
|
947
1005
|
<ul>
|
|
948
1006
|
<strong>Type:</strong> number | number[]<br />
|
|
949
1007
|
<br />
|
|
@@ -972,8 +1030,10 @@ npm install morphing-scroll
|
|
|
972
1030
|
|
|
973
1031
|
</details>
|
|
974
1032
|
|
|
1033
|
+
<h2></h2>
|
|
1034
|
+
|
|
975
1035
|
<details>
|
|
976
|
-
<summary><strong><code>visibleContent</code></strong
|
|
1036
|
+
<summary><strong><code>visibleContent</code></strong>: <em>Makes all elements always visible.</em></summary><br />
|
|
977
1037
|
<ul>
|
|
978
1038
|
<strong>Type:</strong> boolean<br />
|
|
979
1039
|
<br />
|
|
@@ -994,8 +1054,10 @@ npm install morphing-scroll
|
|
|
994
1054
|
|
|
995
1055
|
</details>
|
|
996
1056
|
|
|
1057
|
+
<h2></h2>
|
|
1058
|
+
|
|
997
1059
|
<details>
|
|
998
|
-
<summary><strong><code>onVisible</code></strong
|
|
1060
|
+
<summary><strong><code>onVisible</code></strong>: <em>Callback function triggered when the element becomes visible.</em></summary><br />
|
|
999
1061
|
<ul>
|
|
1000
1062
|
<strong>Type:</strong> (key: string) => void<br />
|
|
1001
1063
|
<br />
|
|
@@ -1026,6 +1088,8 @@ npm install morphing-scroll
|
|
|
1026
1088
|
|
|
1027
1089
|
</details>
|
|
1028
1090
|
|
|
1091
|
+
<h2></h2>
|
|
1092
|
+
|
|
1029
1093
|
- ### Link:
|
|
1030
1094
|
|
|
1031
1095
|
[IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
|