การแบ่งหน้า

hook เสริมสำหรับหน้า/เลื่อนแบบไม่สิ้นสุดที่ใช้ IntersectionObserver.


useListPagingForSentinel

เสียบ ref ที่รายการแรก/สุดท้าย และเรียกใช้หน้าก่อนหน้า/ถัดไปเมื่อเข้ามาใน viewport.

tsx
const { firstChildRef, lastChildRef } = useListPagingForSentinel<HTMLDivElement>({
  onReachTerminal: ({ isFirst, isLast }) => {
    if (isFirst) loadPreviousPage();
    if (isLast) loadNextPage();
  },
});

return items.map((item, index) => (
  <div
    key={item.id}
    ref={
      index === 0
        ? firstChildRef
        : index === items.length - 1
          ? lastChildRef
          : undefined
    }
  >
    {item.name}
  </div>
));

usePaginationViewNumber

showCurrentPageNumber

현재 보이는 페이지 번호입니다.

showCurrentPageObserveTarget

data-page-index를 가진 페이지 wrapper에 연결하는 observe ref입니다.

usePagingHandler

usePagingHandlerจะทำการ scrollIntoView สำหรับหน้าที่โหลดแล้วเท่านั้น และช่วยเรียกใช้ fetch callback สำหรับหน้าที่ไม่มี.

tsx
const dataListRef = useRef<Array<Item[] | null>>([]);
const { setPaginationRef, handleReachTerminal, handleClickPageChange } =
  usePagingHandler<Item>({
    lastCallPageNumber: 0,
    dataListRef,
  });