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
onChangePageevent
There are also a couple of optional props:
- pageSize - the number of items displayed on each page (defaults to 10)
- maxPages - the max number of page links to display in the pagination nav (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 (
ulelement) - .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 (3.x or 4.x) 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.
Need Some React Help?
Search fiverr for freelance React developers.
Follow me for updates
When I'm not coding...
Me and Tina are on a motorcycle adventure around Australia.
Come along for the ride!