Reactで配列を使ってレンダリングした要素をスクロールする際、配列内でスクロールをループさせたい。

Question

前提・実現したいこと

array.map()でレンダーしたコンポーネントがあります。
下記は動作デモです。
demo(CodeSandBox)
カラフルな正方形の要素が横スクロールします。

ピンクの要素までスクロールするとスクロールが止まりますが、ピンクの次に赤→青→緑→...と、スクロールをループさせたいです。

該当のソースコード

export default function App() {
  const colorArray = ["red", "blue", "green", "yellow", "pink"];
  const colorComponent = colorArray.map((item, key) => (
    <div key={key}>
      <div className={item} style={{ width: "200px", height: "200px" }} />
    </div>
  ));

  return (
    <>
      <p>this is loop content</p>
      <div style={{ display: "flex", overflowX: "auto" }}>{colorComponent}</div>
    </>
  );
}

.red {
  background: red;
}

.blue {
  background: blue;
}

.green {
  background: green;
}

.yellow {
  background: yellow;
}

.pink {
  background: pink;
}

試したこと

厳密に言えばループとは違うと思いますが、無限スクロールについて調べたところ、react-infinite-scroll-componentというライブラリを見つけました。
ライブラリを使用したデモがいくつかあったのですが、文字通り無限スクロールするデモか、遅延読み込みさせるデモしかありませんでした。

「react scroll loop」でググったところライブラリを見つけたのですが、ループアニメーションを実装するライブラリでした。

Answer 1

こんにちは

react-waypoint を使ってみるのはいかがでしょうか？ yarn add react-waypoint した後、以下のような修正になります。

 import React from "react";
+import { Waypoint } from 'react-waypoint';
 import "./style.css";
 
+const COLORS = ["red", "blue", "green", "yellow", "pink"];
+
 export default function App() {
-  const colorArray = ["red", "blue", "green", "yellow", "pink"];
+  const [colorArray, setColorArray] = React.useState(COLORS);
+
+  const handleWaypointEnter = () => {
+    setColorArray(colorArray.concat(COLORS));
+  }
+
   const colorComponent = colorArray.map((item, key) => (
     <div key={key}>
       <div className={item} style={{ width: "200px", height: "200px" }} />
     </div>
-  ));
+  )).concat(<Waypoint key={-1} horizontal onEnter={handleWaypointEnter} />);
 
   return (
    <>
      <p>this is loop content</p>
      <div style={{ display: "flex", overflowX: "auto" }}>{colorComponent}</div>
    </>
  );
}

仕組みとしては、<Waypoint> の onEnter が発生するたびに、colorArray に5色の配列を足していきます。以下はご質問にあったcodesandboxのコードをforkして、上記の修正を反映させたAppを動作確認するものです。

• 動作確認用codesandbox: https://codesandbox.io/s/q271097-20bym

参考になれば幸いです。