@os-design-mobile/use-load-next

React hooks for FlatList and ScrollView that performs pagination in Relay.

Installation

Install the package using the following command:

yarn add @os-design-mobile/use-load-next

Example of usage with FlatList

Get props from usePaginationFragment and pass it to the useFlatListLoadNext hook as follows:

const { data, ...paginationProps } = usePaginationFragment(
  collectionsFragment,
  userCollectionsKey
);

const flatListPaginationProps = useFlatListLoadNext(paginationProps);

return <FlatList {...flatListPaginationProps} />;

You can load the specified number of items on the next page by passing the count parameter. By default, the count parameter equals 60.

useFlatListLoadNext(paginationProps, { count: 10 });

Also, you can load the next page before the user reaches the threshold to the end of the page (in units of visible length of the list). By default, the threshold parameter equals 2.

useFlatListLoadNext(paginationProps, { threshold: 0.5 });

Example of usage with ScrollView

Similarly, you can implement pagination with ScrollView using the useScrollViewLoadNext:

const { data, ...paginationProps } = usePaginationFragment(
  collectionsFragment,
  userCollectionsKey
);

const scrollViewPaginationProps = useScrollViewLoadNext(paginationProps);

return <ScrollView {...scrollViewPaginationProps} />;

As with using useFlatListLoadNext, you can also specify the count and threshold parameters.

The threshold parameter is specified in units and equals to 500 by default.