react-infinited-scroll v1.0.1

Static Height Element

If the ight of element inside of scrolling container is static, Please use FixInfinitedScroll

import React, { useCallback, useState } from 'react';
import FixInfinitedScroll from '../../fix-infinited-scroll';
import { generateItems } from '../../mock';
import Item from '../Item';
import styles from './index.module.scss';

type TProps = {};

const FixClass =
  React.memo <
  TProps >
  (() => {
    const [list, setList] = useState(generateItems());
    const load = useCallback(() => {
      setList([...list, ...generateItems()]);
    }, [list]);
    return (
      <div className={styles.container}>
        <FixInfinitedScroll load={load} list={list}>
          {(item, ref) => <Item ref={ref} item={item} />}
        </FixInfinitedScroll>
      </div>
    );
  });

export default FixClass;

Dynamic Height Element

If the height of element inside of scrolling container only render by displaying, Please use 'DynamicInfinitedScroll'

import React, { useCallback, useState } from 'react';
import DynamicInfinitedScroll from '../../dynamic-infinited-scroll';
import { generateDynamicItems } from '../../mock';
import DynamicItem from '../DynamicItem';
import styles from './index.module.scss';

export default function DynamicClass() {
  const [list, setList] = useState(generateDynamicItems());
  const load = useCallback(() => {
    setList([...list, ...generateDynamicItems()]);
  }, [list]);
  return (
    <div className={styles.container}>
      <DynamicInfinitedScroll load={load} list={list} elementHeight={100}>
        {(item) => <DynamicItem item={item} />}
      </DynamicInfinitedScroll>
    </div>
  );
}

load

When scroll to the bottom of container, it will fire the load callback, should load and change list.
Callback of type: () => void;

list

rendering list.
List type: any[]

elementHeight

neccessary property for estimating height, it must be set to 'DynamicInfinitedScroll'
element height type: number