@s-ui/react-molecule-pagination

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 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 totalPages={25} page={7} />

Range of 5 pages

<MoleculePagination totalPages={25} page={7} showPages={5}/>

With icons

<MoleculePagination totalPages={25} page={7} prevButtonIcon={prevButtonIcon} nextButtonIcon={nextButtonIcon}/>

With translations

<MoleculePagination totalPages={25} page={7} prevButtonText={prevButtonText} nextButtonText={nextButtonText}/>

With callbacks

<MoleculePagination totalPages={25} page={7} onClickNext={onClickNext} onClickPrev={onClickPrev} onClickPage={onClickPage}/>

Full example

<MoleculePagination 
  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.