現在開発中のアプリに、ページが一番下までスクロールされたら追加要素を読み込む、という処理を追加したくて調査したところ、「react-infinite-scroller」というライブラリを見つけたので実装してみました。
GitHub のページはこちらから。
GitHub – danbovey/react-infinite-scroller: ⏬ Infinite scroll component for React in ES6
https://github.com/danbovey/react-infinite-scroller
なお、実装にあたり、こちらの記事も参考にさせていただきました。
React Redux react-infinite-scroller で 無限スクロールを実装する | Monotalk
https://www.monotalk.xyz/blog/react-redux-react-infinite-scroller-で-無限スクロールを実装する/
まず、ライブラリのインストールは下記のコマンドで行います。
npm install react-infinite-scroller --save
インストールが完了したら、使用したい場所でライブラリをインポートします。
import InfiniteScroll from 'react-infinite-scroller';
render には次のように記述します。
<InfiniteScroll
pageStart={0}
loadMore={["追加要素を取得する処理"]}
hasMore={true}
initialLoad={false}
loader={<div className="loader" key={0}>Loading ...</div>}>
{items}
</InfiniteScroll>
3行目の loadMore には、ページを一番下までスクロールした時に実行したい関数を記述します。
私は、API から追加要素を取得する処理を指定しました。
4行目の hasMore には、追加読み込みを行うかを指定します。
上記のサンプルコードでは true の値を固定で指定していますが、実際には追加読み込みする要素がなくなったら false にする、という処理が必要になります。
5行目の initialLoad では、loadMore に指定された関数を画面表示された初回に実行するかどうかを指定できます。
私の場合、初回のデータを取得する処理と追加読み込み時に実行したい処理が別だったので initialLoad には false を指定しました。
6行目の loader には、追加要素を読み込んでいるときに表示したい要素を指定します。
こちらは、上記のように Loading… という文字を表示しても良いと思いますが、react-loading 等を使って、ローディングアイコンを表示してもいいと思います。
基本的には、以上の Props を指定すれば問題なく動作するはずです。
ただ、1点躓いた箇所があり、上記の無限スクロール要素の親要素に overflow: scroll; を指定していると、一番下までスクロールをしても loadMore に指定した、追加読み込みを行う処理が実行されないという現象が発生しました。
こちらについては、親要素の overflow: scroll; を overflow: auto; に変更することで事なきを得たのですが、個人的にこのレイアウトが少々気になるんですよね…。
重要度はそこまで高くはないのですが、何とかして overflow: scroll; と共生できないか挑戦したいと思います。
以上、React で無限スクロールを実装できるライブラリ「react-infinite-scroller」のご紹介でした。
ご参考になれば幸いです。
