2.20.0 • Published 2 years ago
@s-ui/react-molecule-pagination v2.20.0
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.
2.20.0
2 years ago
2.19.0
2 years ago
2.17.0
2 years ago
2.18.0
2 years ago
2.15.0
2 years ago
2.16.0
2 years ago
2.14.0
3 years ago
2.13.0
3 years ago
2.12.0
3 years ago
2.11.0
3 years ago
2.10.0
3 years ago
2.9.0
4 years ago
2.8.0
4 years ago
2.7.0
4 years ago
2.5.0
4 years ago
2.4.0
4 years ago
2.6.0
4 years ago
2.3.0
4 years ago
2.2.0
4 years ago
2.1.0
4 years ago
2.0.0
5 years ago
1.1.0
5 years ago