Skip to content

Instantly share code, notes, and snippets.

@kasperaamodt
Created Aug 18, 2021
Embed
What would you like to do?
Infinite scroll
import { useArchiveInfiniteScroll } from "@frontity/hooks";
import { connect, styled } from "frontity";
import React from "react";
import Loading from "../pages/loading";
import ListPage from "./list-page";
const List = () => {
const {
pages,
isLimit,
isFetching,
isError,
fetchNext
} = useArchiveInfiniteScroll({ limit: 3 });
return (
<>
<Header>
<h1>Media</h1>
</Header>
{pages.map(({ key, link, isLast, Wrapper }) => (
<Wrapper key={key}>
<ListPage link={link} />
{!isLast && <></>}
</Wrapper>
))}
<ButtonContainer>
{isFetching && <Loading />}
{isLimit && <Button className="wp-block-button__link" onClick={fetchNext}>Load more</Button>}
{isError && (
<Button className="wp-block-button__link" onClick={fetchNext}>Something went wrong, try again</Button>
)}
</ButtonContainer>
</>
);
};
export default connect(List);
const ButtonContainer = styled.div`
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 1200px;
margin: 20px auto;
`;
const Button = styled.button`
`;
const Header = styled.div`
width: 100%;
margin: 40px 0;
text-align: center;
h1 {
font-size: 78px;
font-weight: 400;
}
@media (max-width: 600px) {
h1 {
font-size: 48px;
}
}
`;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment