README
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><</span>
const nextButtonIcon = () => <span>></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.