@createnl/pagination

Pagination

Pagination with SEO described in this article (Crazy Idea #2): https://www.portent.com/blog/seo/pagination-tunnels-experiment-click-depth.htm

Installation

npm install --save @createnl/pagination

yarn add @createnl/pagination

Example

import React from "react";
import Pagination from '@createnl/pagination';

const Container = (props) => {
    const [page, setPage] = useState(0);

    const onPaginationChange = (page) => {
        setPage(page);
    }    

    return (
        <Pagination
            centerNumbers
            id="pagination"
            onChange={onPaginationChange}
            amountOfPages={30}
            currentPage={15}
        />
    );
};

Advanced examples

Use marginInitial and marginCenter to set the number of buttons

<Pagination
    id="pagination"
    onChange={console.log}
    amountOfPages={30}
    currentPage={15}
    marginInitial={3}
    marginCenter={2}
/>

Use baseHref to use href links instead of buttons

<Pagination
    id="pagination"
    baseHref="/items?page="
    amountOfPages={30}
    currentPage={15}
/>

Enable centerNumbers for better SEO

<Pagination
    centerNumbers
    id="pagination"
    baseHref="/items?page="
    amountOfPages={30}
    currentPage={15}
/>

Set text of directional buttons with buttonPrevText and buttonNextText

<Pagination
    buttonPrevText="Vorige"
    buttonNextText="Volgende"
    id="pagination"
    onChange={console.log}
    amountOfPages={30}
    currentPage={15}
/>

Real life example

import React from "react";
import Pagination from '@createnl/pagination';

<Pagination
    centerNumbers
    buttonPrevText="Vorige"
    buttonNextText="Volgende"
    id="pagination"
    onChange={onPaginationChange}
    baseHref="/stages?page="
    amountOfPages={30}
    currentPage={15}
    marginInitial={3}
    marginCenter={2}
/>

.pagination {
  .pagination__ellipsis {
    width: 1rem;

    @include for-size(tablet-portrait-up) {
      width: 1.5rem;
    }
  }

  .pagination-input__label {
    min-width: 1rem;
    padding: 0.5rem;
    font-size: 1rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--c-muted);

    @include for-size(tablet-portrait-up) {
      margin: 0 0.25rem;
      min-width: 1.5rem;
      font-size: 1rem;
    }

    &--active {
      background-color: var(--c-secondary);
      box-shadow: $shadow-md rgba(var(--c-shadow-rgb), 0.11);
      color: var(--c-text);
    }

    &:not(.pagination-input__label--active) {
      &:hover, &:focus {
        color: var(--c-text);
        background-color: var(--c-grey-light);
      }
    }
  }

  .pagination-direction-button {
    width: var(--pagination-block-size);
    text-decoration: none;

    &--disabled {
      background: none;
    }

    &__text {
      display: none;
    }
  }

  @include for-size(phone-only) {
    .pagination-input--side-number {
      display: none;

      & + .pagination__ellipsis {
        display: none;
      }
    }

    .pagination__controls {
      flex-wrap: wrap;
      justify-content: space-between;
    }

    .pagination__list {
      justify-content: center;
      margin-bottom: 1.5rem;
      width: 100%;
      order: 0;
    }

    .pagination-direction-button {
      border-radius: 2px;
      justify-content: center;
      width: 50%;
      padding: 1rem;
      line-height: 2;
      font-family: $f-secondary;
      font-size: 0.75rem;
      letter-spacing: 0.07em;
      text-transform: uppercase;
      color: var(--c-black);
      opacity: 1;

      svg {
        height: 0.75rem;
        min-width: 0.75rem;
        fill: var(--c-black);
      }

      &__text {
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        font-weight: 600;
      }

      &--prev, &--next {
        width: calc(50% - #{0.5rem});
      }

      &--prev {
        order: 1;
        background-color: var(--c-grey);
      }

      &--next {
        order: 2;
        background-color: var(--c-secondary);
      }
    }

    &.pagination--start {
      .pagination-direction-button--prev {
        display: none;
      }

      .pagination-direction-button--next {
        width: 100%;
      }
    }

    &.pagination--end {
      .pagination-direction-button--next {
        display: none;
      }

      .pagination-direction-button--prev {
        width: 100%;
      }
    }
  }
}