Create bi-directional infinite scroll In React Using bx-stable-infinite-scroll


Category: React React Others | June 29, 2021
Author:cathykc
Official Page:Go to website
Last Update:June 29, 2021
License:MIT

Description:

You can create bi-directional infinite scroll in react using bx-stable-infinite-scroll component, provide the feature to load additional data from the both ends of the container with maintaining the current view. This component is best option if you are creating a timeline, feeds or creating a chat application.

How can I use it?

First, install the component using NPM.

npm install --save bx-stable-infinite-scroll

Or, you can install it with Yarn.

yarn add bx-stable-infinite-scroll

Code example:

import { concat, map } from "lodash";
import randomColor from "randomcolor";
import React, { FunctionComponent, useState } from "react";

import BxInfiniteScroll from "../../src";

const App: FunctionComponent = () => {
  const [items, setItems] = useState(
    map([1, 2, 3, 4, 5, 7, 8, 9, 10], (i) => {
      return { color: "#AAA", text: `Initial item ${i}` };
    }),
  );
  const [loadingNext, setLoadingNext] = useState(false);
  const [loadingPrevious, setLoadingPrevious] = useState(false);

  const handleNextDataLoad = () => {
    setLoadingNext(true);
    setTimeout(() => {
      const color = randomColor();
      const time = new Date().toLocaleTimeString();
      const loadedItems = map([1, 2, 3, 4, 5], (i) => {
        return { color, text: `Next ${i}: ${time}` };
      });
      setItems((prevItems) => concat(prevItems, loadedItems));

      setLoadingNext(false);
    }, 1000);
  };

  const handlePreviousDataLoad = () => {
    setLoadingPrevious(true);
    setTimeout(() => {
      const color = randomColor();
      const time = new Date().toLocaleTimeString();
      const loadedItems = map([1, 2, 3, 4, 5], (i) => {
        return { color, text: `Previous ${i}: ${time}` };
      });
      setItems((prevItems) => concat(loadedItems, prevItems));

      setLoadingPrevious(false);
    }, 1000);
  };

  return (
    <>
      <h4
        style={{
          margin: "24px 0",
        }}
      >
        Scroll in both directions to load additional items 👆👇
      </h4>
      <div
        style={{
          boxShadow: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)",
          height: "300px",
        }}
      >
        <BxInfiniteScroll
          loadingComponent={
            <div style={{ padding: "8px 16px" }}>Loading 5 more items...</div>
          }
          nextDataFn={handleNextDataLoad}
          nextEnd={false}
          nextLoading={loadingNext}
          previousDataFn={handlePreviousDataLoad}
          previousEnd={false}
          previousLoading={loadingPrevious}
        >
          {map(items, (item) => {
            return (
              <div
                key={item.text}
                style={{
                  display: "flex",
                  alignItems: "center",
                  padding: "8px 16px",
                  borderBottom: "1px solid #DDD",
                }}
              >
                <div
                  style={{
                    backgroundColor: item.color,
                    height: "16px",
                    width: "16px",
                    borderRadius: "4px",
                    marginRight: "4px",
                  }}
                />
                {item.text}
              </div>
            );
          })}
        </BxInfiniteScroll>
      </div>
    </>
  );
};

export default App;