usePagination / usePaginator

[cloudever]

What about that possible hook?

type HookProps =  [number, (position: number): number, ?number];

type HookParams = {
    pageSize: number, 
    collectionSize: number,
    initialCurrentPage: ?number = 1,
}

function ListComponent() {
    const params: HookParams = { 
        pageSize, 
        collectionSize,
        initialCurrentPage,
    };

    const [currentPage, gotoPage, totalPages]: HookProps = usePaginator(params);
  
    const gotoNext = (): number => gotoPage(currentPage + 1)
    const gotoPrev = (): number => gotoPage(currentPage - 1)

    return (
        <Pagination {...} />
    )
}

[streamich]

I think we could do something like usePagination, but currently the API seems to be quite verbose to me. Maybe it makes sense to first start with a "simpler" cursor based pagination, where you receive an opaque cursor from the server to be used in next request.

const ListComponent = () => {
  const [list, loadMore] = useCursorPagination(
    (cursor) => `http://my-site.com/list.php?cursor=${cursor}`,
    (response) => [response.body.list, response.body.cursor],
  );

  return (
    <>
      {list.map(({item, key}) => <Item {..item} key={key} />)}
    </>
  );
};

[SnowFlowers]

In modern web app,We use rest-api for our data,I think cursor is a better description, but if i compose cursor and response in usePagination is not uneconomic. Most of us don't need your api in this component.What we should do is only show the Pagination UI.like this
,

#210 (comment)
This is just for pagination. Not for server data.

[wardoost]

@SnowFlowers I'm not in favor of adding UI components to this library as this is a hooks library. The hook should expose state and callbacks that can be used with any UI components.

I think @streamich's example should maybe be called useAsyncMore and have an API that's similar to the useAsync hook. @cloudever's hook could be simplified to something like this:

const {nextPage, prevPage, goToPage} = usePagination(initialPage);

This is so simple and similar to useCounter that I'm not really sure if it's worth adding a custom hook to the library for this.

[SnowFlowers]

@wardoost OK, I see. Maybe it's not a good part for this repo.

[slykar]

This is so simple and similar to useCounter that I'm not really sure if it's worth adding a custom hook to the library for this.

The first thing I did when I found this repo was ctrl+f -> usePaginat.... It could be just an alias. I would say that name aliasing is a pretty common approach to make the API more developer friendly. How many new users will figure out that they can do pagination with useCounter?

Anyone can do the aliasing on their own, but they could also implement their own useCounter hook. It's all simple, but it's nice to have a little bit less work to do.