morphing-scroll 1.5.16 → 1.5.18

package/README.md

@@ -1,6 +1,6 @@
 ![logo](https://drive.google.com/uc?export=view&id=1mpb5TAElX3Xla4sGFISp4bQMu0zuNJaa "logo")
 
-##
+<h2></h2>
 
 ### 〈♦ Table of contents 〉
 
@@ -11,13 +11,13 @@
 - [IntersectionTracker](#-intersectiontracker-)
 - [API](#-api-)
 
-##
+<h2></h2>
 
 ### 〈♦ About 〉
 
 `morphing-scroll` is a `React` library designed to optimize the rendering of data lists. It leverages virtual rendering and lazy loading to handle large datasets efficiently, significantly enhancing performance. The library also resolves cross-browser inconsistencies in scroll element rendering by replacing them with custom ones. Additionally, it provides convenient horizontal scrolling with flexible content movement options.
 
-##
+<h2></h2>
 
 ### 〈♦ Installation 〉
 
@@ -27,7 +27,7 @@ To install the library, use the following command:
 npm install morphing-scroll
 ```
 
-##
+<h2></h2>
 
 ### 〈♦ MorphScroll 〉
 
@@ -58,9 +58,7 @@ npm install morphing-scroll
 
     </ul>
   </details>
-
-  ##
-
+  <h2></h2>
   <details>
     <summary><strong><code>children</code></strong> : <em>Custom user content.</em></summary><br />
     <ul>
@@ -83,8 +81,7 @@ npm install morphing-scroll
 
     </ul>
   </details>
-
-  ##
+  <h2></h2>
 
   #### SCROLL SETTINGS:
 
@@ -113,9 +110,7 @@ npm install morphing-scroll
 
     </ul>
   </details>
-
-  ##
-
+  <h2></h2>
   <details>
     <summary><strong><code>direction</code></strong> : <em>Scrolling direction.</em></summary><br />
     <ul>
@@ -140,9 +135,7 @@ npm install morphing-scroll
 
     </ul>
   </details>
-
-  ##
-
+  <h2></h2>
   <details>
     <summary><strong><code>scrollTop</code></strong> : <em>Scroll position and animation duration.</em></summary><br />
     <ul>
@@ -178,9 +171,7 @@ npm install morphing-scroll
 
     </ul>
   </details>
-
-  ##
-
+  <h2></h2>
   <details>
     <summary><strong><code>stopLoadOnScroll</code></strong> : <em>Stop loading when scrolling.</em></summary><br />
     <ul>
@@ -204,9 +195,7 @@ npm install morphing-scroll
 
     </ul>
   </details>
-
-  ##
-
+  <h2></h2>
   <details>
     <summary><strong><code>onScrollValue</code></strong> : <em>Callback for scroll value.</em></summary><br />
     <ul>
@@ -233,9 +222,7 @@ npm install morphing-scroll
 
     </ul>
   </details>
-    
-  ##
-
+      <h2></h2>
   <details>
     <summary><strong><code>isScrolling</code></strong> : <em>Callback function for scroll status.</em></summary><br />
     <ul>
@@ -259,8 +246,7 @@ npm install morphing-scroll
 
     </ul>
   </details>
-
-  ##
+  <h2></h2>
 
   #### VISUAL SETTINGS:
 
@@ -293,9 +279,7 @@ npm install morphing-scroll
 
     </ul>
   </details>
-
-  ##
-
+  <h2></h2>
   <details>
     <summary><strong><code>objectsSize</code> (required)</strong> : <em>Required: Size of cells for each object.</em></summary><br />
     <ul>
@@ -326,9 +310,7 @@ npm install morphing-scroll
 
     </ul>
   </details>
-
-  ##
-
+  <h2></h2>
   <details>
     <summary><strong><code>gap</code></strong> : <em>Gap between cells.</em></summary><br />
     <ul>
@@ -354,9 +336,7 @@ npm install morphing-scroll
 
     </ul>
   </details>
-
-  ##
-
+  <h2></h2>
   <details>
     <summary><strong><code>padding</code></strong> : <em>Padding for the <code>objectsWrapper</code>.</em></summary><br />
     <ul>
@@ -393,9 +373,7 @@ npm install morphing-scroll
 
     </ul>
   </details>
-
-  ##
-
+  <h2></h2>
   <details>
     <summary><strong><code>contentAlign</code></strong> : <em>Aligns the content when it is smaller than the MorphScroll <code>size</code>.</em></summary><br />
     <ul>
@@ -427,9 +405,7 @@ npm install morphing-scroll
 
     </ul>
   </details>
-
-  ##
-
+  <h2></h2>
   <details>
     <summary><strong><code>elementsAlign</code></strong> : <em>Aligns the objects within the <code>objectsWrapper</code>.</em></summary><br />
     <ul>
@@ -448,9 +424,7 @@ npm install morphing-scroll
 
     </ul>
   </details>
-
-  ##
-
+  <h2></h2>
   <details>
     <summary><strong><code>edgeGradient</code></strong> : <em>Gradient when scrolling overflows.</em></summary><br />
     <ul>
@@ -481,9 +455,7 @@ npm install morphing-scroll
 
     </ul>
   </details>
-
-  ##
-
+  <h2></h2>
   <details>
     <summary><strong><code>progressReverse</code></strong> : <em>Reverse the progress bar position.</em></summary><br />
     <ul>
@@ -511,9 +483,7 @@ npm install morphing-scroll
 
     </ul>
   </details>
-
-  ##
-
+  <h2></h2>
   <details>
     <summary><strong><code>progressVisibility</code></strong> : <em>Visibility of the progress bar.</em></summary><br />
     <ul>
@@ -537,9 +507,7 @@ npm install morphing-scroll
 
     </ul>
   </details>
-
-  ##
-
+  <h2></h2>
   <details>
     <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 />
     <ul>
@@ -561,8 +529,7 @@ npm install morphing-scroll
 
     </ul>
   </details>
-
-  ##
+  <h2></h2>
 
   #### PROGRESS AND RENDERING:
 
@@ -604,9 +571,7 @@ npm install morphing-scroll
 
     </ul>
   </details>
-
-  ##
-
+  <h2></h2>
   <details>
     <summary><strong><code>render</code></strong> : <em>Types of rendering for optimization.</em></summary><br />
     <ul>
@@ -657,9 +622,7 @@ npm install morphing-scroll
 
     </ul>
   </details>
-
-  ##
-
+  <h2></h2>
   <details>
     <summary><strong><code>emptyElements</code></strong> : <em>Handling of empty scroll elements.</em></summary><br />
     <ul>
@@ -709,9 +672,7 @@ npm install morphing-scroll
 
     </ul>
   </details>
-
-  ##
-
+  <h2></h2>
   <details>
     <summary><strong><code>suspending</code></strong> : <em>Adds React Suspense.</em></summary><br />
     <ul>
@@ -724,20 +685,18 @@ npm install morphing-scroll
       <br />
       <strong>Example:</strong>
 
-  ```tsx
-  <MorphScroll
-    suspending
-    // another props
-  >
-    {children}
-  </MorphScroll>
-  ```
+      ```tsx
+      <MorphScroll
+        suspending
+        // another props
+      >
+        {children}
+      </MorphScroll>
+      ```
 
     </ul>
   </details>
-
-  ##
-
+  <h2></h2>
   <details>
     <summary><strong><code>fallback</code></strong> : <em>Fallback element.</em></summary><br />
     <ul>
@@ -748,19 +707,19 @@ npm install morphing-scroll
       <br />
       <strong>Example:</strong>
 
-  ```tsx
-  <MorphScroll
-    fallback={<div>Loading...</div>}
-    // another props
-  >
-    {children}
-  </MorphScroll>
-  ```
+      ```tsx
+      <MorphScroll
+        fallback={<div>Loading...</div>}
+        // another props
+      >
+        {children}
+      </MorphScroll>
+      ```
 
     </ul>
   </details>
 
-##
+<h2></h2>
 
 ### 〈♦ ResizeTracker 〉
 
@@ -792,24 +751,22 @@ npm install morphing-scroll
       <br />
       <strong>Example:</strong>
 
-  ```tsx
-  <ResizeTracker
-  // another props
-  >
-    {(rect) => (
-      <p>
-        Width: {rect.width}, Height: {rect.height}
-      </p>
-    )}
-  </ResizeTracker>
-  ```
+      ```tsx
+      <ResizeTracker
+      // another props
+      >
+        {(rect) => (
+          <p>
+            Width: {rect.width}, Height: {rect.height}
+          </p>
+        )}
+      </ResizeTracker>
+      ```
 
     </ul>
 
   </details>
-
-  ##
-
+  <h2></h2>
   <details>
     <summary><strong><code>style</code></strong> : <em>Applies inline styles to the container.</em></summary><br />
     <ul>
@@ -817,20 +774,18 @@ npm install morphing-scroll
       <br />
       <strong>Example:</strong>
 
-  ```tsx
-  <ResizeTracker style={{ backgroundColor: "blue" }}>
-    {(rect) => (
-      // content
-    )}
-  </ResizeTracker>
-  ```
+      ```tsx
+      <ResizeTracker style={{ backgroundColor: "blue" }}>
+        {(rect) => (
+          // content
+        )}
+      </ResizeTracker>
+      ```
 
     </ul>
 
   </details>
-
-  ##
-
+  <h2></h2>
   <details>
     <summary><strong><code>measure</code></strong> : <em>Defines the measurement strategy.</em></summary><br />
     <ul>
@@ -849,20 +804,18 @@ npm install morphing-scroll
       <br />
       <strong>Example:</strong>
 
-  ```tsx
-  <ResizeTracker measure="all">
-    {(rect) => (
-      // content
-    )}
-  </ResizeTracker>
-  ```
+      ```tsx
+      <ResizeTracker measure="all">
+        {(rect) => (
+          // content
+        )}
+      </ResizeTracker>
+      ```
 
     </ul>
 
   </details>
-
-  ##
-
+  <h2></h2>
   <details>
     <summary><strong><code>onResize</code></strong> : <em>Callback triggered on size changes.</em></summary><br />
     <ul>
@@ -874,29 +827,28 @@ npm install morphing-scroll
       <br />
       <strong>Example:</strong>
 
-  ```tsx
-  <ResizeTracker
-    onResize={(rect) => {
-      console.log("New size:", rect);
-    }}
-  >
-    {(rect) => (
-      // content
-    )}
-  </ResizeTracker>
-  ```
+      ```tsx
+      <ResizeTracker
+        onResize={(rect) => {
+          console.log("New size:", rect);
+        }}
+      >
+        {(rect) => (
+          // content
+        )}
+      </ResizeTracker>
+      ```
 
     </ul>
 
   </details>
-
-  ##
+  <h2></h2>
 
 - ### Link:
 
   [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserver)
 
-##
+<h2></h2>
 
 ### 〈♦ IntersectionTracker 〉
 
@@ -911,16 +863,14 @@ npm install morphing-scroll
       <br />
       <strong>Example:</strong>
 
-  ```tsx
-  <IntersectionTracker>{children}</IntersectionTracker>
-  ```
+      ```tsx
+      <IntersectionTracker>{children}</IntersectionTracker>
+      ```
 
     </ul>
 
   </details>
-
-  ##
-
+  <h2></h2>
   <details>
     <summary><strong><code>style</code></strong> : <em>Applies inline styles to the container.</em></summary><br />
     <ul>
@@ -928,18 +878,16 @@ npm install morphing-scroll
       <br />
       <strong>Example:</strong>
 
-  ```tsx
-  <IntersectionTracker style={{ backgroundColor: "blue" }}>
-    {children}
-  </IntersectionTracker>
-  ```
+      ```tsx
+      <IntersectionTracker style={{ backgroundColor: "blue" }}>
+        {children}
+      </IntersectionTracker>
+      ```
 
     </ul>
 
   </details>
-
-  ##
-
+  <h2></h2>
   <details>
     <summary><strong><code>root</code></strong> : <em>Defines the observation area.</em></summary><br />
     <ul>
@@ -955,18 +903,16 @@ npm install morphing-scroll
       <br />
       <strong>Example:</strong>
 
-  ```tsx
-  <IntersectionTracker root={document.getElementById("root")}>
-    {children}
-  </IntersectionTracker>
-  ```
+      ```tsx
+      <IntersectionTracker root={document.getElementById("root")}>
+        {children}
+      </IntersectionTracker>
+      ```
 
     </ul>
 
   </details>
-
-  ##
-
+  <h2></h2>
   <details>
     <summary><strong><code>rootMargin</code></strong> : <em>Sets the margin around the root element.</em></summary><br />
     <ul>
@@ -986,22 +932,20 @@ npm install morphing-scroll
       <br />
       <strong>Example:</strong>
 
-  ```tsx
-  <IntersectionTracker
-    rootMargin={10}
-    // rootMargin={[10, 20]}
-    // rootMargin={[10, 20, 10, 20]}
-  >
-    {children}
-  </IntersectionTracker>
-  ```
+      ```tsx
+      <IntersectionTracker
+        rootMargin={10}
+        // rootMargin={[10, 20]}
+        // rootMargin={[10, 20, 10, 20]}
+      >
+        {children}
+      </IntersectionTracker>
+      ```
 
     </ul>
 
   </details>
-
-  ##
-
+  <h2></h2>
   <details>
     <summary><strong><code>threshold</code></strong> : <em>Defines when the callback is triggered.</em></summary><br />
     <ul>
@@ -1019,21 +963,19 @@ npm install morphing-scroll
       <br />
       <strong>Example:</strong>
 
-  ```tsx
-  <IntersectionTracker
-    threshold={0.5}
-    // threshold={[0, 0.5, 1]}
-  >
-    {children}
-  </IntersectionTracker>
-  ```
+      ```tsx
+      <IntersectionTracker
+        threshold={0.5}
+        // threshold={[0, 0.5, 1]}
+      >
+        {children}
+      </IntersectionTracker>
+      ```
 
     </ul>
 
   </details>
-
-  ##
-
+  <h2></h2>
   <details>
     <summary><strong><code>visibleContent</code></strong> : <em>Makes all elements always visible.</em></summary><br />
     <ul>
@@ -1048,16 +990,14 @@ npm install morphing-scroll
       <br />
       <strong>Example:</strong>
 
-  ```tsx
-  <IntersectionTracker visibleContent>{children}</IntersectionTracker>
-  ```
+      ```tsx
+      <IntersectionTracker visibleContent>{children}</IntersectionTracker>
+      ```
 
     </ul>
 
   </details>
-
-  ##
-
+  <h2></h2>
   <details>
     <summary><strong><code>onVisible</code></strong> : <em>Callback function triggered when the element becomes visible.</em></summary><br />
     <ul>
@@ -1074,29 +1014,28 @@ npm install morphing-scroll
       <br />
       <strong>Example:</strong>
 
-  ```tsx
-  <IntersectionTracker
-    onVisible={(key) => {
-      if (key.includes("elementId")) {
-        // do something
-      }
-    }}
-  >
-    {children}
-  </IntersectionTracker>
-  ```
+      ```tsx
+      <IntersectionTracker
+        onVisible={(key) => {
+          if (key.includes("elementId")) {
+            // do something
+          }
+        }}
+      >
+        {children}
+      </IntersectionTracker>
+      ```
 
     </ul>
 
   </details>
-
-  ##
+  <h2></h2>
 
 - ### Link:
 
   [IntersectionObserver](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
 
-##
+<h2></h2>
 
 ### 〈♦ API 〉
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "morphing-scroll",
-  "version": "1.5.16",
+  "version": "1.5.18",
   "description": "Library for using various methods of scrolling objects〈♦〉",
   "author": "Georg Schilin",
   "license": "MIT",