This feature is currently in beta version. We want to test it in real projects before releasing the v1, just in case we have to modify the API. If you’re interested in this feature, it’d be great if you could install it, test it, and share your feedback in this Feature Discussion. To try it out, you have to install the affected packages using these tags:
@frontity/[email protected]
@frontity/[email protected]
@frontity/[email protected]
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>;
};