https://github.com/alan2207/react-scrollable-pagination

📜 Paginate your application's data by scrolling...
https://github.com/alan2207/react-scrollable-pagination

infinite-scroll pagination react react-router render-props scrolling

Last synced: about 1 month ago
JSON representation

📜 Paginate your application's data by scrolling...

• Host: GitHub
• URL: https://github.com/alan2207/react-scrollable-pagination
• Owner: alan2207
• Created: 2019-01-06T23:50:49.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2019-02-02T17:32:43.000Z (almost 6 years ago)
• Last Synced: 2024-10-08T17:30:09.885Z (3 months ago)
• Topics: infinite-scroll, pagination, react, react-router, render-props, scrolling
• Language: JavaScript
• Homepage: http://react-scrollable-pagination.surge.sh/
• Size: 751 KB
• Stars: 5
• Watchers: 3
• Forks: 2
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# react-scrollable-pagination

> React component for scrollable bidirectional data pagination...

[![NPM](https://img.shields.io/npm/v/react-scrollable-pagination.svg)](https://www.npmjs.com/package/react-scrollable-pagination)

[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

### [Demo](http://react-scrollable-pagination.surge.sh)

![Demo](demo.gif?raw=true 'Demo')

## Installation

```bash

npm install --save react-scrollable-pagination

```

or

```bash

yarn add react-scrollable-pagination

```

## Usage

```jsx

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 = () => (

  


    
Example

     {

        return fetch(`${URL}?page=${page}`);

      }}

      dataSelector={res => res}

      metaSelector={res => res.meta || {totalPages: 10}}

      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) => (

        
 1 ? {minHeight: '70vh'} : {}}>

          data.map(item => (

          


            {item}

          

          ))

        

      )}

    

  

);

```


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

### Props

  

    Prop

    type

    isRequired

    defaultValue

    Description

  

  

    children

    function

    true

    

    Render prop function that provides data that should be rendered.

  

  

    history

    object

    true

    

    History object that should be provided by the router. It can be provided by wrapping the component in `withRouter` HOC.

  

  

    location

    object

    true

    

    Location object that should be provided by the router It can be provided by wrapping the component in `withRouter` HOC.

  

  

    fetchData

    function

    true

    

    Function that will fetch the data. It accepts 'page' parameter and It's return value must be a promise.

  

  

    dataSelector

    function

    true

    

    Function that extracts the data from resolved promise that is being returned by 'fetchData' function. 
This data will be provided as data inside render prop function

  

  

    metaSelector

    function

    true

    

    Function that extracts the meta data from resolved promise that is being returned by fetchData function. The meta object must contain `totalPages` property.

  

  

    className

    string

    false

    ""

    Style your component with classes.

  

  

    style

    object

    false

    {}

    Custom inline styles for the component.

  

  

    pageParam

    string

    false

    "page"

    The query parameter that will control pagination.

  

  

    fixed

    boolean

    false

    false

    Should be set if the component should become scrollable. In that case it must have fixed height. If false, window scroll will control pagination.

  

  

    loader

    JSX element

    false

    </div>Loading...</div>

    Custom loader to display on top or bottom of the component while loading more data.

  

  

    beforeInitialLoad

    function

    false

    noop func

    Function that is triggered when the component is mounted and before fetching the data. Convenient to display loading spinner until the initial data is loaded.

  

  

    afterInitialLoad

    function

    false

    noop func

    Function that is triggered when the result of fetchData is resolved. Convenient to hide loading spinner once the data has been loaded.

  

### 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](https://github.com/alan2207)