April 10 2018

npm - JW React Pagination Component

Based on a previous post that I did showing a React pagination example with logic like Google's search results, I extracted the React pagination component from the example and published it to npm to make it easier for people to use.

The source code for the component is available on GitHub at https://github.com/cornflourblue/jw-react-pagination

Demo

The GitHub repo contains a demo of the pagination component that you can run locally by running npm install followed by npm start in a terminal window from the /demo directory of the project.

Here it is in action: (See on StackBlitz at https://stackblitz.com/edit/jw-react-pagination-component)

Installation

npm install jw-react-pagination

Integration with your React app

Import the pagination component anywhere you'd like to use it in your React application:

import JwPagination from 'jw-react-pagination';


Usage

There are 2 required props for using the React pagination component:

  • items - the array of items to be paged
  • onChangePage - a callback function for handling the onChangePage event

There are also a couple of optional props:

  • pageSize - the number of items displayed on each page (defaults to 10)
  • initialPage - the initial page to display (defaults to 1)

Here's a cut down snippet taken from the above demo app showing an example list of 150 items being paged:

import React from 'react';
import JwPagination from 'jw-react-pagination';

class App extends React.Component {
    constructor() {
        super();

        // an example array of items to be paged
        var exampleItems = [...Array(150).keys()].map(i => ({ id: (i+1), name: 'Item ' + (i+1) }));

        // bind the onChangePage method to this React component
        this.onChangePage = this.onChangePage.bind(this);

        // store example items and current page of items in local state
        this.state = {
            exampleItems,
            pageOfItems: []
        };
    }

    onChangePage(pageOfItems) {
        // update local state with new page of items
        this.setState({ pageOfItems });
    }

    render() {
        return (
            <div>
                <h1>React - Pagination Example with logic like Google</h1>
                {this.state.pageOfItems.map(item =>
                    <div key={item.id}>{item.name}</div>
                )}
                <JwPagination items={this.state.exampleItems} onChangePage={this.onChangePage} />
            </div>
        );
    }
}

export default App;


Custom Styling

The React pagination component comes with some very basic default styles. To use your own custom styles I'd recommend disabling the default styles by adding the property disableDefaultStyles={true} to the JwPagination component, then adding custom styles in your css with the following css selectors:

  • .pagination - Pagination component container (ul element
  • .pagination li - All list items in the pagination component
  • .pagination li a - All pagination links including first, last, previous and next
  • .pagination li.page-number - All page numbers (1, 2, 3 etc) pagination elements
  • .pagination li.first - The 'First' pagination element
  • .pagination li.last - The 'Last' pagination element
  • .pagination li.previous - The 'Previous' pagination element
  • .pagination li.next - The 'Next' pagination element

Note: you can also plug in bootstrap which the component works well with, that's what I used in the demo.

If you prefer you can also override or extend the default styles (instead of disabling them) by passing a custom styles object to the JwPagination component like this:

import React from 'react';
import JwPagination from 'jw-react-pagination';

const customStyles = {
    ul: {
        backgroundColor: 'red'
    },
    li: {
        border: '1px solid green'
    },
    a: {
        color: 'blue'
    }
};

class App extends React.Component {
    ...

    render() {
        return (
            <div>
                ...
                <JwPagination items={this.state.exampleItems} onChangePage={this.onChangePage} styles={customStyles} />
            </div>
        );
    }
}

export default App;


Custom labels for First, Last, Next & Previous pagination buttons

You can use custom labels for the First, Last, Next & Previous buttons by passing a labels object to the JwPagination component like this:

import React from 'react';
import JwPagination from 'jw-react-pagination';

const customLabels = {
    {
        first: '<<',
        last: '>>',
        previous: '<',
        next: '>'
    }
};

class App extends React.Component {
    ...

    render() {
        return (
            <div>
                ...
                <JwPagination items={this.state.exampleItems} onChangePage={this.onChangePage} labels={customLabels} />
            </div>
        );
    }
}

export default App;


Hiding pagination buttons

To hide any of the buttons you can simply set them to display: none; using the css selectors described above.

 

Web Development Sydney

Feel free to contact me if you're looking for a web developer in Sydney, I also provide remote contracting services for clients outside Sydney.

 


Sponsored by