Add rootMargin

Author: jason89521

docs/api/InfiniteScroll.md

@@ -21,6 +21,7 @@ interface Props<T, P extends HTMLElement> {
   next: () => unknown;
   threshold?: number;
   root?: Element | Document | undefined | null;
+  rootMargin?: string;
   reverse?: boolean;
 }
 
@@ -32,6 +33,7 @@ declare function InfiniteScroll<T, P extends HTMLElement>({
   next,
   threshold,
   root,
+  rootMargin,
   reverse,
 }: Props<T, P>): JSX.Element;
 ```
@@ -76,6 +78,16 @@ The range of `threshold` is 0 ~ 1, and the default value is `0`.
 
 This property will be used as the viewport for checking visibility of the last or the first item. Must be the ancestor of the item. Defaults to the browser viewport.
 
+### `rootMargin`
+
+A string which specifies a set of offsets to add to the root's bounding box.
+
+:::tip
+
+Since `InfiniteScroll` is implemented with IntersectionObserver, you can find more information about `threshold`, `root` and `rootMargin` on [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)
+
+:::
+
 ### `reverse`
 
 Set this property to `true` means that `InfiniteScroll` will call `next` when the first item shows up in the viewport. This property is usually used to implement the chatbox behavior.

src/lib/InfiniteScroll.tsx

@@ -13,6 +13,7 @@ interface Props<T, P extends HTMLElement> {
   next: () => unknown;
   threshold?: number;
   root?: Element | Document | null;
+  rootMargin?: string;
   reverse?: boolean;
 }
 
@@ -24,6 +25,7 @@ function InfiniteScroll<T, P extends HTMLElement>({
   next,
   threshold = 0,
   root = null,
+  rootMargin = '0px',
   reverse,
 }: Props<T, P>) {
   const observer = useRef<IntersectionObserver>();
@@ -46,11 +48,11 @@ function InfiniteScroll<T, P extends HTMLElement>({
             next();
           }
         },
-        { threshold, root }
+        { threshold, root, rootMargin }
       );
       observer.current.observe(element);
     },
-    [hasMore, isLoading, next, threshold, root]
+    [hasMore, isLoading, next, threshold, root, rootMargin]
   );
 
   const renderedItems = itemData.map((datum, idx) => {