coder, maker, hacker, mentor

Disclaimer: The opinions expressed herein are my own personal opinions and do not represent my employer’s view in any way.

Rolled My Own Pager

posted on July 7, 2021 by Mark Roxberry
main post image
Notes for the pager implementation on Roxberry.DEV

Infinity scroll or pager

I opted to implement a pager on Roxberry.DEV

Pager.js

Followed the guidance on the Gatsby site to query and set pages in the gatsby-node.js file, added a posts.js template and moved the Pager code to a separate file, pager.js.

import React from "react"
import { Link } from "gatsby"

const Pager = ({
  isFirst,
  isLast,
  prevPage,
  nextPage,
  currentPage,
  numPages,
}) => {
  return (
    <ul
      className="post-pager"
      style={{
        display: "flex",
        flexWrap: "wrap",
        alignItems: "center",
        listStyle: "none",
        paddingInlineStart: 0,
      }}
    >
      {!isFirst && (
        <Link to={prevPage} rel="prev" style={{ marginRight: 20 }}>
          ← Previous Page
        </Link>
      )}
      {Array.from({ length: numPages }, (_, i) => (
        <li
          key={`pagination-number${i + 1}`}
          style={{
            margin: 20,
          }}
        >
          <Link
            to={`/${i === 0 ? "" : i + 1}`}
            style={{
              textDecoration: "none",
              color: i + 1 === currentPage ? "#ffffff" : "",
              background: i + 1 === currentPage ? "#007acc" : "",
            }}
          >
            {i + 1}
          </Link>
        </li>
      ))}
      {!isLast && (
        <Link to={nextPage} rel="next" style={{ marginLeft: 20 }}>
          Next Page →
        </Link>
      )}
    </ul>
  )
}

export default Pager

Pager then can be added to a page template, posts.js:

import Pager from "../components/pager"

Set the values, per the Gatsby documentation,

const { currentPage, numPages } = this.props.pageContext
const isFirst = currentPage === 1
const isLast = currentPage === numPages
const prevPage =
  currentPage - 1 === 1 ? "/" : "/" + (currentPage - 1).toString()
const nextPage = "/" + (currentPage + 1).toString()

And then placed in the component hierarchy of the page (note the properties for the component passed in).

    <Pager
        isFirst={isFirst}
        isLast={isLast}
        prevPage={prevPage}
        nextPage={nextPage}
        currentPage={currentPage}
        numPages={numPages} />