endless-scrollable

Installation

yarn add endless-scrollable

or

npm install endless-scrollable --save

Usage

Clones ComponentToCopy infinitely:

const List = () => {
    return (
        <EndlessScrollable item={ComponentToCopy} />
    )
}

More practical example:

const List = () => {
    const [page, setPage] = useState(1);

  /**
   * ComponentToCopy will get {page}
   * which can be used to fetch some more data out of ComponentToCopy
   */
    return (
        <EndlessScrollable item={ComponentToCopy} itemProps={{ page, setPage }} />
    )
}

Props

Name	Type	Required	Description
item	React.ComponentType<IItem>	true	Component's props must implement IITem interface
itemProps	IItemProps	false	interface IItemProps { [prop: string]: any; }
intersectionOptions	object	false	https://github.com/thebuilder/react-intersection-observer#options
className	string	false	wrapper's classname

More examples in storybook

Clone repo

cd endless-scrollable/

yarn install

yarn storybook