react-js-pager

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

//...
import Pager from 'react-js-pager';

export default function App() {
  let pagerMethods = null;

  const next_page_handle = () => {
    if (pagerMethods !== null) pagerMethods.next();
  };

  const previous_page_handle = () => {
    if (pagerMethods !== null) pagerMethods.previous();
  };

  const set_page_handle = pageIndex => {
    if (pagerMethods !== null) pagerMethods.setPage(pageIndex);
  };

  return (
    <>
      <div id='pager'>
        <Pager
          ref={node => (pagerMethods = node)}
          orientation='horizontal'
          animationStyle='scroll'
          wrapperStyle={{ width: '300px' }}
        >
          {/* Page with index (0) */}
          <div className='pageContainer'>...Page0 Content</div>

          {/* Page with index (1) */}
          <div className='pageContainer'>...Page1 Content</div>

          {/* Page with index (2) */}
          <div className='pageContainer'>...Page2 Content</div>
        </Pager>
      </div>
    </>
  );
}

Props

orientation : [ 'horizontal' | 'vertical' ] [optional]

• Set horizontal or vertical pages arrangement orientation.
• If you set it to vertical make sure to provide a height value in wrapperStyle prop otherwise it will be set to 50vh by default.
• Default Value horizontal

initialPage : [Number] [optional]

• Index of initial page that should be selected on the first render.
• Default Value 0

loop : [Boolean] [optional]

• Loop scrolling between pages.
• Note: Loop scrolling does not work for touch swipe/drag gestures.
• Default Value false

touchGestures : [Boolean] [optional]

• Whether to enable or disable swipe/drag gestures for touch screens.
• Default Value true

wrapperStyle : [Object] [optional]

• Pager wrapper element inline style.
• You can also use id or className attributes to add style from CSS StyleSheet.
• Note: Pager wrapper element has a flex box style by default.

wheelScroll : [Boolean] [optional]

• Change pages by rotating mouse scroll wheel.
• Default Value true

wheelScrollWithAnimation : [Boolean] [optional]

• Whether to use animation when changing pages with mouse scroll wheel or not.
• Default Value true

showScrollbar : [Boolean] [optional]

• Whether to show or hide Pager scrollbar.
• Will show scrollbar on the bottom for horizontal orientation and on the left for vertical orientation.
• Default Value false

animationStyle : [ 'blur' | 'opacity' | 'scroll' | 'scale' | 'scaleX' | 'scaleY' | 'rotateX' | 'rotateY' ] [optional]

• Animation style when navigating through pages.
• Note: touch swipe/drag gestures always uses scroll animation style.
• Default Value scroll

perspective : [Number] [optional]

• 3d transform perspective value used only for rotateX and rotateY animation style.
• Default Value 1000

duration : [Number] [optional]

• Navigation animation duration in ms.
• Default Value 300

ease : [ String | Function ] [optional]

• Navigation animation transition timing function.
• Check easings.net to learn more.
• Default Value easeOutExpo
• If you want to provide your own timing-function make sure that the function takes one parameter and returns one value.

function easeInQuad(x) {
  return x * x;
}

onAnimation : [ ( event: Object ) => void ] [optional]

• This callback will be called every time animation frame changes, including touch swipe/drag gestures.

| Event props | Description | Type | | :-------------------: | ---------------------------------------------------------- | :-----: | | animationPercentage | Animation progress percentage, a value between (0 - 1). | Number | | selectedPageIndex | The page index that will be navigated to. | Number | | previousPageIndex | The page index that will be navigated from. | Number | | touchSwipe | Whether the animation is coming from a touch swipe or not. | Boolean |

onNavigationStart : [ ( selectedPageIndex: Number, previousPageIndex: Number ) => void ] [optional]

• This callback will be called once the pager starts navigating to the selected page.
• Note: this callback will be called on the first render too.

| Params | Description | Type | | :-----------------: | ------------------------------------------- | :----: | | selectedPageIndex | The page index that will be navigated to. | Number | | previousPageIndex | The page index that will be navigated from. | Number |

onPageSelected : [ ( selectedPageIndex: Number, previousPageIndex: Number ) => void ] [optional]

• This callback will be called once the pager finishes navigating to the selected page.
• Note: this callback will be called on the first render too.

| Params | Description | Type | | :-----------------: | ----------------------------------- | :----: | | selectedPageIndex | The page index that navigated to. | Number | | previousPageIndex | The page index that navigated from. | Number |

onPagerScroll : [ ( event: Object ) => void ] [optional]

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

previous : ( withAnimation?: Boolean = true ) => void

• Navigate to the previous page.
• Takes a boolean param to enable/disable animation.

setPage : ( pageIndex: Number, withAnimation?: Boolean = true ) => void

• Navigate to a specific page index.
• Takes a number param (pageIndex) and a boolean param to enable/disable animation.