Infinite scroll

list.js

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;
    }
  }
`;