Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Infinite Load Hooks - UsePostTypeInfiniteScroll
import { usePostTypeInfiniteScroll } from "@frontity/hooks";
import { styled, connect } from "frontity";
const ArticlesOverview = ({ state }) => {
const { posts, isFetching, isLimit, isError, fetchNext } =
usePostTypeInfiniteScroll({ limit: 9 });
return (
<>
<div>
{posts.map(({ Wrapper, key, link, isLast }) => (
<Wrapper key={key}>
<div>{link}</div>
{!isLast && <hr />}
</Wrapper>
))}
</div>
<ButtonContainer>
{isFetching && <div>Loading..</div>}
{isLimit && <Button onClick={fetchNext}>Load Next Page</Button>}
{isError && (
<Button onClick={fetchNext}>Something failed - Retry</Button>
)}
</ButtonContainer>
</>
);
};
export default connect(ArticlesOverview);
const ButtonContainer = styled.div`
width: 100%;
text-align: center;
margin-top: 40px;
`;
const Button = styled.button`
position: relative;
background: black;
color: white;
padding: 12px;
font-weight: bold;
border: none;
`;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment