morphing-scroll 1.5.17 → 1.5.18

package/README.md

@@ -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,7 +81,6 @@ 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>
-
+      <h2></h2>
   <details>
     <summary><strong><code>isScrolling</code></strong> : <em>Callback function for scroll status.</em></summary><br />
     <ul>
@@ -259,7 +246,6 @@ 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,7 +529,6 @@ 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,14 +707,14 @@ 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>
@@ -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,22 +827,21 @@ 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:
@@ -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,22 +1014,21 @@ 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:

package/package.json

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