MoleculePagination

MoleculePagination is a component that displays a range of pages with the current page highlighted and the proper buttons to navigate across the available pages in the entire range of total pages

Installation

$ npm install @s-ui/react-molecule-pagination --save

Usage

import MoleculePagination from '@s-ui/react-molecule-pagination'

const ariaLabel = 'Paginación'
const prevLinkAriaLabel = 'Página previa'
const nextLinkAriaLabel = 'Página siguiente'
const pagePrefixAriaLabel = 'Página'

const prevButtonIcon = () => <span>&lt;</span>
const nextButtonIcon = () => <span>&gt;</span>
const prevButtonText = 'Anterior'
const nextButtonText = 'Siguiente'
const onSelectNext = (e, {page}) => {
  console.log({e, page})
}
const onSelectPrev = (e, {page}) => {
  console.log({e, page})
}
const onSelectPage = (e, {page}) => {
  console.log({e, page})
}

Basic usage

<MoleculePagination
  ariaLabel={ariaLabel}
  prevLinkAriaLabel={prevLinkAriaLabel}
  nextLinkAriaLabel={nextLinkAriaLabel}
  pagePrefixAriaLabel={pagePrefixAriaLabel}
  totalPages={25}
  page={7}
/>

Range of 5 pages

<MoleculePagination
  ariaLabel={ariaLabel}
  prevLinkAriaLabel={prevLinkAriaLabel}
  nextLinkAriaLabel={nextLinkAriaLabel}
  pagePrefixAriaLabel={pagePrefixAriaLabel}
  totalPages={25}
  page={7}
  showPages={5}
/>

With icons

<MoleculePagination
  ariaLabel={ariaLabel}
  prevLinkAriaLabel={prevLinkAriaLabel}
  nextLinkAriaLabel={nextLinkAriaLabel}
  pagePrefixAriaLabel={pagePrefixAriaLabel}
  totalPages={25}
  page={7}
  prevButtonIcon={prevButtonIcon}
  nextButtonIcon={nextButtonIcon}
/>

With translations

<MoleculePagination
  ariaLabel={ariaLabel}
  prevLinkAriaLabel={prevLinkAriaLabel}
  nextLinkAriaLabel={nextLinkAriaLabel}
  pagePrefixAriaLabel={pagePrefixAriaLabel}
  totalPages={25}
  page={7}
  prevButtonText={prevButtonText}
  nextButtonText={nextButtonText}
/>

With callbacks

<MoleculePagination
  ariaLabel={ariaLabel}
  prevLinkAriaLabel={prevLinkAriaLabel}
  nextLinkAriaLabel={nextLinkAriaLabel}
  pagePrefixAriaLabel={pagePrefixAriaLabel}
  totalPages={25}
  page={7}
  onSelectNext={onSelectNext}
  onSelectPrev={onSelectPrev}
  onSelectPage={onSelectPage}
/>

Full example

<MoleculePagination
  ariaLabel={ariaLabel}
  prevLinkAriaLabel={prevLinkAriaLabel}
  nextLinkAriaLabel={nextLinkAriaLabel}
  pagePrefixAriaLabel={pagePrefixAriaLabel}
  totalPages={25}
  page={7}
  prevButtonIcon={prevButtonIcon}
  nextButtonIcon={nextButtonIcon}
  prevButtonText={prevButtonText}
  nextButtonText={nextButtonText}
  onSelectNext={onSelectNext}
  onSelectPrev={onSelectPrev}
  onSelectPage={onSelectPage}
/>

Find full description and more examples in the demo page.