React library to alows users to navigate through pages of data.
Best for creating tabs, image slider, fullPage scrolling and more.
Installation
npm install react-js-pager
Usage
Note: If you have pages with different heights, give them a style with height: 100% and overflow: auto to make sure that the scrollbar will show on the pages not on the pager wrapper element.
//...importPagerfrom'react-js-pager';exportdefaultfunctionApp(){letpagerMethods=null;constnext_page_handle=()=>{if(pagerMethods!==null)pagerMethods.next();};constprevious_page_handle=()=>{if(pagerMethods!==null)pagerMethods.previous();};constset_page_handle=pageIndex=>{if(pagerMethods!==null)pagerMethods.setPage(pageIndex);};return(<><divid='pager'><Pagerref={node=>(pagerMethods=node)}orientation='horizontal'animationStyle='scroll'wrapperStyle={{width: '300px'}}>{/* Page with index (0) */}<divclassName='pageContainer'>...Page0 Content</div>{/* Page with index (1) */}<divclassName='pageContainer'>...Page1 Content</div>{/* Page with index (2) */}<divclassName='pageContainer'>...Page2 Content</div></Pager></div></>);}
Executed when transitioning between pages (ether because the animation for the requested page has changed or when the user is
swiping/dragging between pages).
This is usefull for animating pages/tabs/slides indicators among other things.
Event props
Description
Type
percentageX
Pager scrolled length percentage on the X axis, a value between (0 - 1).
Number
percentageY
Pager scrolled length percentage on the Y axis, a value between (0 - 1).
Number
scrollX
Pager current scrolling position on the X axis.
Number
scrollY
Pager current scrolling position on the Y axis.
Number
scrollWidth
Pager scroll width in px.
Number
scrollHeight
Pager scroll height in px.
Number
pagerWidth
Pager computed width in px.
Number
pagerHeight
Pager computed height in px.
Number
event
Pager onscroll native event.
Object
Methods
next : ( withAnimation?: Boolean = true ) => void
Navigate to the next page.
Takes a boolean param to enable/disable animation.