react-scrollable-pagination

React component for scrollable bidirectional data pagination...

Demo

Installation

npm install --save react-scrollable-pagination

or

yarn add react-scrollable-pagination

Usage

import React from 'react';
import ReactScrollablePagination from 'react-scrollable-pagination';
import {withrouter} from 'react-router-dom';

// inject history and location props
const Scroller = withRouter(ReactScrollablePagination);

const Component = () => (
  <div>
    <h3>Example</h3>
    <Scroller
      className="scroller"
      style={{height: '70vh', border: '1px solid black'}}
      pageParam="page"
      fixed
      fetchData={page => {
        return fetch(`${URL}?page=${page}`);
      }}
      dataSelector={res => res}
      metaSelector={res => res.meta || {totalPages: 10}}
      loader={<div className="loader" />}
      beforeInitialLoad={() => console.log('Init')}
      afterInitialLoad={() => console.log('Done')}
    >
      /* IF USING FIXED: you will probably need to give minHeight of the div to
      be at least the same as the height of the component itself, to maintain
      scrollability even when there is not enough items to overflow. But if you
      have only one page, setting won't be neccessary, and will only add
      unneccessary scrollbar, so make sure you have more than one page before
      giving it the minHeight property */
      {(data, meta) => (
        <div style={meta.totalPages > 1 ? {minHeight: '70vh'} : {}}>
          data.map(item => (
          <div key={item}>
            <Link to={`/item/${item}`}>{item}</Link>
          </div>
          ))
        </div>
      )}
    </Scroller>
  </div>
);

For more detailed example you can check out the example folder.

Props

Todo

• Make it independent of react-router (At the moment, the user must wrap it inside withRouter to be able to use it properly )
• Add option to add top and bottom offset. (At the moment, it scrolls up and down when scroller reaches top and bottom.)

License

MIT © alan2207