Load More

インポート

import { LoadMore } from '@caroainc/ui-components/client'

個別サブパス（バンドルサイズを抑えたい場合）:

import { LoadMore } from '@caroainc/ui-components/load-more'

基本的な使い方

cursorなどで続きを読み込む一覧の下に置きます。読み込み中はボタンが押せなくなり、失敗すると説明と「再読み込み」が出ます（表示中の項目はそのまま残します）。最後まで読み込んだら、呼び出し側で描画しないでください。

下の例は、1回目の読み込みでわざと失敗します。

{nextCursor ? (
  <LoadMore status={status} onLoadMore={() => loadMore(nextCursor)} />
) : null}

使い分け

• ページ番号で移動する一覧はPaginationを使う
• 何を読み込むかが分かりにくい画面では、label（例: 「メンバーをもっと見る」）やerrorMessageで対象を書く

Props