1.1.0 • Published 5 years ago
@ds-labs.xyz/srp v1.1.0
Simplified React Pagination
A purely functional react component to take care of pagination with ease. Meant to be used with twitter bootstrap.
Set up
srp
can be installed from npm
by running:
npm i @ds-labs.xyz/srp
Features
This component will:
- Display a list of page numbers
- Calculate the correct page numbers to display depending on the current page and total number of pages
- Handle edge cases, such as when the number is greater than the total number of pages
- Notify you when a page number is clicked
This component will not:
- Manage page changes
Usage
Import the component with:
import { Pagination } from "@ds-labs.xyz/srp";
Then use it wherever you like:
<Pagination totalItems={200} itemsPerPage={20} page={1}/>
Optionally you can use the pagesToDisplay
property to control how many pages are displayed:
<Pagination totalItems={200} itemsPerPage={20} page={1} pagesToDisplay={5}/>
To manage page changes you can pass a function to the onPageChange
property which will be triggered when the user clicks on a page change like so:
<Pagination
totalItems={200}
itemsPerPage={10}
page={1}
onPageChange={(e) => console.log("User requested page " + parseInt(e.target.innerHTML, 10))}
/>
Complete Example
import React, {Component} from 'react';
import {Pagination} from '@ds-labs.xyz/srp';
class App extends Component {
state = {
currentPage: 1
}
handlePageChange = (e) => {
const pageRequested = parseInt(e.target.innerHTML, 10)
// console.log("User requested page " + pageRequested)
this.setState({currentPage: pageRequested})
}
render() {
return (
<div className="App">
<header className="App-header">
<Pagination
totalItems={200}
itemsPerPage={10}
page={this.state.currentPage}
onPageChange={this.handlePageChange}
/>
</header>
</div>
);
}
}
export default App;