@os-design-mobile/use-load-next
v1.0.37
Published
React hooks for `FlatList` and `ScrollView` that performs pagination in Relay.
Downloads
43
Readme
@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.