useArchiveInfiniteScroll
usePostTypeInfiniteScroll
useInfiniteScroll
useInfiniteScroll
is not intented to be used directly by theme developers unless they are creating their own infinite scroll logic. Use useArchiveInfiniteScroll
or usePostTypeInfiniteScroll
instead.Wrapper
components, one for each entity listed while scrolling, that handle both the route updating and fetching of the next entity.useArchiveInfiniteScroll
useInfiniteScroll
hooks used internally.useArchiveInfiniteScroll
is designed to be used inside an Archive
component. That component would render all the archive pages from the pages
returned by the hook.active
boolean
true
limit
number
useInView
hook.pages
Array
of page propsisFetching
boolean
isLimit
boolean
isError
boolean
fetchNext
function
isLimit === true
) and the user pushes a button to get the next page or when there has been an error fetching the last page and the user wants to retry.pages
array has the following structure:key
string
link
string
isLast
boolean
Wrapper
React.FC
Archive
component.usePostTypeInfiniteScroll
archive
and a fallback
prop βboth linksβ, to specify the source of the post entities. If none of them is specified, state.source.postsPage
is used. When the penultimate post of the first page is rendered, the next page of the archive is fetched. A list of the fetched pages is stored in the browser history state along with the list of posts.limit
prop in this case stands for the number of posts being shown, not the number of fetched pages (as in the case of useArchiveInfiniteScroll
). In the same way, the fetchNext
shows the next post, and only fetches the next page of posts if needed.active
boolean
true
limit
number
archive
string
fallback
string
archive
option is not present and the previous link is not an archive.useInView
hook.posts
Array
of post propsisFetching
boolean
isLimit
boolean
isError
boolean
fetchNext
function
isLimit === true
) and the user pushes a button to get the next post or when there has been an error fetching the last post and the user wants to retry.posts
array has the following structure:key
string
link
string
isLast
boolean
Wrapper
React.FC
Post
component.@frontity/hooks
package.useInfiniteScroll
useInfiniteScroll
is not intented to be used directly by theme developers unless they are creating their own infinite scroll logic. Use useArchiveInfiniteScroll
or usePostTypeInfiniteScroll
instead.currentLink
and nextLink
, and returns two React refs that should be attached to react elements. The hook uses useInView
internally to track the visibility of those elements and trigger an actions.router.set
to update the current link or an actions.source.fetch
to fetch the next entity. You can pass options for these useInView
hooks as well, using the fetchInViewOptions
and the routeInViewOptions
params.useInfiniteScroll
also keeps a record of the fetched & ready entities in the browser history state, in order to restore the list when you go back and forward while navigating. That record is accessible from the browser history state under the infiniteScroll.links
array.state.router.state
.Wrapper
component that would wrap the entity pointed by currentLink
.currentLink
string
nextLink
string
useInView
hook.supported
boolean
supported
is false
, all the other returned properties will be undefined.routeRef
React.Ref
actions.router.set
.fetchRef
React.Ref
actions.source.fetch
.routeInView
boolean
actions.router.set
is in the screen.fetchInView
boolean
actions.source.fetch
is in the screen.useInfiniteScroll
works. For better examples, see the useArchiveInfiniteScroll
and the usePostTypeInfiniteScroll
implementation.