Merge pull request #11 from jason89521/clone-element

Clone element

Author: jason89521

README.md

@@ -1,7 +1,7 @@
 # React Infinite Scroll Component
 
 [![npm (scoped)](https://img.shields.io/npm/v/@yuxuan-zheng/react-infinite-scroll)](https://www.npmjs.com/package/@yuxuan-zheng/react-infinite-scroll)
-[![npm](https://img.shields.io/npm/dm/@yuxuan-zheng/react-infinite-scroll)](https://www.npmjs.com/package/@yuxuan-zheng/react-infinite-scroll)
+[![npm](https://img.shields.io/npm/dt/@yuxuan-zheng/react-infinite-scroll)](https://www.npmjs.com/package/@yuxuan-zheng/react-infinite-scroll)
 [![npm bundle size (scoped)](https://img.shields.io/bundlephobia/min/@yuxuan-zheng/react-infinite-scroll)](https://www.npmjs.com/package/@yuxuan-zheng/react-infinite-scroll)
 
 A lightweight package provides a react component that implements the functionality of infinitely scrolling.

docs/README.md

@@ -9,7 +9,7 @@ title: Introduction
 
 ## Easy to use
 
-To make `InfiniteScroll` work, you just need to tell it whether your application is loading and are there more data to load, then create your `Item` component with `React.forwardRef` and an array with a specific type. Finally, pass a function which should be called when the last item displayed in the viewport.
+To make `InfiniteScroll` work, you just need to tell it whether your application is loading, whether there are more data and the function you want to call when it reach bottom
 
 ## No pollution
 

docs/api/InfiniteScroll.md

@@ -8,34 +8,27 @@ InfiniteScroll is a React component which uses IntersectionObserver to implement
 ## Parameters
 
 ```tsx
-interface Data<T> {
-  key?: React.Key;
-  props: T;
-}
-
-interface Props<T, P extends HTMLElement> {
+interface Props {
   isLoading: boolean;
   hasMore: boolean;
-  Item: React.ForwardRefExoticComponent<T & React.RefAttributes<P>> | string;
-  itemData: Data<T>[];
   next: () => unknown;
   threshold?: number;
-  root?: Element | Document | undefined | null;
+  root?: Element | Document | null;
   rootMargin?: string;
   reverse?: boolean;
+  children?: JSX.Element[];
 }
 
-declare function InfiniteScroll<T, P extends HTMLElement>({
+declare function InfiniteScroll({
   isLoading,
   hasMore,
-  Item,
-  itemData,
   next,
   threshold,
   root,
   rootMargin,
   reverse,
-}: Props<T, P>): JSX.Element;
+  children,
+}: Props): JSX.Element;
 ```
 
 ### `isLoading`
@@ -46,24 +39,6 @@ declare function InfiniteScroll<T, P extends HTMLElement>({
 
 Used to determine whether there are more items to display. If the last item is displayed in the viewport and `hasMore` is `true`, then `InfiniteScroll` will call `next()`.
 
-### `Item`
-
-A React component with `React.forwardedRef` or a string like `li`. `InfiniteScroll` will pass a callback function to the last item's ref in order to determine whether the last item is displayed in the viewport.
-
-### `itemData`
-
-An array of objects. The object in this array has 2 properties called `key` and `props`.
-
-#### `key`
-
-Since `InfiniteScroll` will use `map()` to generate the `Item` component, it needs a key to help React distinguish between components. If the items in `InfiniteScroll` will be deleted or moved, then you should specify a key.
-
-If `key` is not specified, then `InfiniteScroll` will use the index as a key.
-
-#### `props`
-
-The properties that will be passed to `Item` component. Its type should be the same as `Item`'s props.
-
 ### `next`
 
 If `isLoading` is `false` and `hasMore` is `true`, then this function will be called when this last item is displayed in the viewport.
@@ -97,3 +72,7 @@ Set this property to `true` means that `InfiniteScroll` will call `next` when th
 If your `next` function prepend the new data to the previous data, the first item will always show up on the top. This will cause `InfiniteScroll` continuously call `next`. Make sure write some code to prevent this circumstance or use [`useScrollToOld`](./useScrollToOld.md);
 
 :::
+
+### `children`
+
+`InfiniteScroll` will pass ref to your children, if your children is a custom component, make sure using `React.forwardRef` to forward ref to its container.

docs/api/useScrollToOld.md

@@ -54,32 +54,22 @@ function ReverseExample() {
       setData([...initData].reverse());
       if (!containerRef.current) return;
       const scrollTop = containerRef.current.scrollHeight - containerRef.current.clientHeight;
-      containerRef.current.scrollTo({ top: scrollTop });
+      containerRef.current?.scrollTo({ top: scrollTop });
     });
   }, []);
 
-  const itemData = data.map(datum => {
-    const key = datum.id;
-    const props: ListItemProps = {
-      id: datum.id,
-      title: datum.title,
-      children: <div>I am a JSX element</div>,
-    };
-    return { key, props };
-  });
-
   return (
     <ul ref={containerRef}>
-      <InfiniteScroll
-        isLoading={isLoading}
-        hasMore={true}
-        itemData={itemData}
-        Item={ListItem}
-        next={next}
-        threshold={1}
-        reverse
-      />
+      <InfiniteScroll isLoading={isLoading} hasMore={true} next={next} threshold={1} reverse>
+        {data.map(datum => {
+          return (
+            <ListItem key={datum.id} title={datum.title} id={datum.id}>
+              <div>I am a JSX element</div>
+            </ListItem>
+          );
+        })}
+      </InfiniteScroll>
     </ul>
   );
 }
-```
+```

docs/getting-started.md

@@ -14,44 +14,17 @@ yarn add @yuxuan-zheng/react-infinite-scroll
 npm install @yuxuan-zheng/react-infinite-scroll
 ```
 
-## Create your `Item` component
-
-To use React Infinite Scroll, you need to create a custom `Item` component and then pass a `React.ForwardedRef` to its container.
-
-```tsx
-export interface ItemProps {
-  id: number;
-  prop1: string;
-  prop2: string;
-  prop3: number;
-}
-
-function Item(props: ItemProps, ref: React.FowardedRef<HTMLLIElement>) {
-  return <li ref={ref}>{props.data}</li>;
-}
-
-export default React.forwardRef(Item);
-```
-
-:::note
-
-You should make sure that your `Item` component pass ref to its container element, otherwise React Infinite Scroll will not work properly.
-
-:::
-
 ## Create a component with `InfiniteScroll`
 
 ```tsx
-import InfiniteScroll from 'InfiniteScroll';
-import Item, { ItemProps } from 'components/Item';
+import InfiniteScroll from '@yuxuan-zheng/react-infinite-scroll';
 
 function InfiniteList() {
-  const [data, setData] = useState<ItemProps>([]);
+  const [data, setData] = useState([]);
   const [isLoading, setIsLoading] = useState(false);
   const [page, setpage] = useState(0);
 
   useEffect(() => {
-    // the return type of fakeApi is Promise<ItemProps[]>
     fakeApi(page).then(initData => {
       setData(initData);
       setPage(page + 1);
@@ -66,23 +39,30 @@ function InfiniteList() {
     setIsLoading(false);
   };
 
-  const itemData = data.map(datum => ({
-    key: datum.id,
-    props: datum,
-  }));
-
   return (
     <ul>
-      <InfiniteScroll
-        isLoading={isLoading}
-        hasMore={true}
-        Item={Item}
-        itemData={itemData}
-        next={fetchNext}
-      />
+      <InfiniteScroll isLoading={isLoading} hasMore={page < 3} next={fetchNext}>
+        {data.map(datum => {
+          return <li key={datum.id}>Hello</li>;
+        })}
+      </InfiniteScroll>
     </ul>
   );
 }
 ```
 
-The 5 properties in the above example are required. For more information about these properties, please see the [API Reference page.](api/InfiniteScroll.md)
+## Create your `Item` component
+
+You can also use a custom component in `InfiniteScroll`, but you should make sure the component pass `ref` to its container correctly.
+
+```tsx
+export interface ItemProps {
+  data: any;
+}
+
+function Item(props: ItemProps, ref: React.FowardedRef<HTMLLIElement>) {
+  return <li ref={ref}>{props.data}</li>;
+}
+
+export default React.forwardRef(Item);
+```

src/demo/App.tsx

@@ -5,7 +5,8 @@ import ReverseExample from 'components/ReverseExample';
 function App() {
   return (
     <div>
-      <ReverseExample />
+      {/* <ReverseExample /> */}
+      <BasicExample />
     </div>
   );
 }

src/demo/components/BasicExample.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import ListItem, { ListItemProps } from './ListItem';
+import ListItem from './ListItem';
 import InfiniteScroll from 'InfiniteScroll';
 import fakeApi, { Data } from 'fakeApi';
 import 'index.css';
@@ -23,25 +23,17 @@ function BasicExample() {
     });
   }, []);
 
-  const itemData = data.map(datum => {
-    const key = datum.id;
-    const props: ListItemProps = {
-      id: datum.id,
-      title: datum.title,
-      children: <div>I am a JSX element</div>,
-    };
-    return { key, props };
-  });
-
   return (
     <ul>
-      <InfiniteScroll
-        isLoading={isLoading}
-        hasMore={page < 3}
-        itemData={itemData}
-        Item={ListItem}
-        next={next}
-      />
+      <InfiniteScroll isLoading={isLoading} hasMore={page < 3} next={next}>
+        {data.map(datum => {
+          return (
+            <ListItem key={datum.id} title={datum.title} id={datum.id}>
+              <div>I am a JSX element</div>
+            </ListItem>
+          );
+        })}
+      </InfiniteScroll>
     </ul>
   );
 }

src/demo/components/ReverseExample.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import ListItem, { ListItemProps } from './ListItem';
+import ListItem from './ListItem';
 import InfiniteScroll, { useScrollToOld } from 'InfiniteScroll';
 import fakeApi, { Data } from 'fakeApi';
 import 'index.css';
@@ -31,27 +31,17 @@ function ReverseExample() {
     });
   }, []);
 
-  const itemData = data.map(datum => {
-    const key = datum.id;
-    const props: ListItemProps = {
-      id: datum.id,
-      title: datum.title,
-      children: <div>I am a JSX element</div>,
-    };
-    return { key, props };
-  });
-
   return (
     <ul ref={containerRef}>
-      <InfiniteScroll
-        isLoading={isLoading}
-        hasMore={true}
-        itemData={itemData}
-        Item={ListItem}
-        next={next}
-        threshold={1}
-        reverse
-      />
+      <InfiniteScroll isLoading={isLoading} hasMore={true} next={next} threshold={1} reverse>
+        {data.map(datum => {
+          return (
+            <ListItem key={datum.id} title={datum.title} id={datum.id}>
+              <div>I am a JSX element</div>
+            </ListItem>
+          );
+        })}
+      </InfiniteScroll>
     </ul>
   );
 }

src/demo/components/ThresholdExample.tsx

@@ -1,5 +1,5 @@
 import React, { useState, useEffect } from 'react';
-import ListItem, { ListItemProps } from './ListItem';
+import ListItem from './ListItem';
 import InfiniteScroll from 'InfiniteScroll';
 import fakeApi, { Data } from 'fakeApi';
 import 'index.css';
@@ -27,26 +27,17 @@ function ThresholdExample({ threshold }: Props) {
     });
   }, []);
 
-  const itemData = data.map(datum => {
-    const key = datum.id;
-    const props: ListItemProps = {
-      id: datum.id,
-      title: datum.title,
-      children: <div>I am a JSX element</div>,
-    };
-    return { key, props };
-  });
-
   return (
     <ul>
-      <InfiniteScroll
-        isLoading={isLoading}
-        hasMore={page < 3}
-        itemData={itemData}
-        Item={ListItem}
-        next={next}
-        threshold={threshold}
-      />
+      <InfiniteScroll isLoading={isLoading} hasMore={page < 3} next={next} threshold={threshold}>
+        {data.map(datum => {
+          return (
+            <ListItem key={datum.id} title={datum.title} id={datum.id}>
+              <div>I am a JSX element</div>
+            </ListItem>
+          );
+        })}
+      </InfiniteScroll>
     </ul>
   );
 }