OPENING POST
Description
Allow the use of some hooks to facilitate the implementation of infinite scroll to Frontity users.
User Stories
As a Frontity theme developer
I want to use a hook to add infinite scroll to my archive pages
so that I can keep my code clean and bullet-proof
As a Frontity theme developer
I want to use a hook to add infinite scroll to my postType pages
so that I can keep my code clean and bullet-proof
Examples
Examples of how they could be used:
import { connect } from "frontity";
import useArchiveInfiniteScroll from "@frontity/hooks/use-archive-infinite-scroll";
const Archive = () => {
const { pages, isLimit, isFetching, fetchNext } = useArchiveInfiniteScroll();
return (
<>
{/* <ArchivePage /> would be a custom component created by the developer. */}
{pages.map(({ key, link, isLast, Wrapper }) => (
<Wrapper key={key}>
<ArchivePage link={link} />
{!isLast && <hr />}
</Wrapper>
))}
{/* <Loading /> would also be a custom component created by the developer. */}
{isFetching && <Loading />}
{isLimit && <button onClick={fetchNext}>Load Next Page</button>}
</>
);
};
export default connect(Archive);
import { connect } from "frontity";
import usePostTypeInfiniteScroll from "@frontity/hooks/use-post-type-infinite-scroll";
const PostTypeList = ({ state }) => {
const data = state.source.get(state.router.link);
const { posts, isLimit, isFetching, fetchNext } = usePostTypeInfiniteScroll({
active: !!data.isPost,
});
return (
<>
{/* <PostType /> would be a custom component created by the developer. */}
{posts.map(({ key, link, isLast, Wrapper }) => (
<Wrapper key={key}>
<PostType link={link} />
{!isLast && <hr />}
</Wrapper>
))}
{/* <Loading /> would also be a custom component created by the developer. */}
{isFetching && <Loading />}
{isLimit && <button onClick={fetchNext}>Load Next Post</button>}
</>
);
};
export default connect(PostTypeList);
We’re planning to have two different hooks: useArchiveInfiniteScroll
and usePostTypeInfiniteScroll
.
These are the types of the hooks in the first beta:
type UseArchiveInfiniteScroll = (options?: {
limit?: number;
active?: boolean;
}) => {
pages: {
key: string;
link: string;
isLast: boolean;
Wrapper: React.FC;
}[];
isLimit: boolean;
isFetching: boolean;
fetchNext: () => Promise<void>;
};
type UsePostTypeInfiniteScroll = (options?: {
limit?: number;
active?: boolean;
archive?: string;
fallback?: string;
}) => {
posts: {
key: string;
link: string;
isLast: boolean;
Wrapper: React.FC;
}[];
isLimit: boolean;
isFetching: boolean;
fetchNext: () => Promise<void>;
};
SUMMARY
Please, bear in mind that this section wasn’t part of the opening post. It has been added afterwards and its purpose is to keep a quick summary with the most relevant information about this FD at the top of the thread.