react-pagination-bar

React Pagination Bar

Lightweight component for pagination of application pages on react

Demo

Content

• Features
• Getting started
• Usage
• Props
• Upgrading from v1 to v2
• More examples
• License

Features

• Customizing class names without using style overrides
• Multiple pagination display modes.
• Accessible. React Pagination Bar follow the WAI-ARIA guidelines specifications. and have the right aria-* attributes.
• Lightweight :P

Getting started

Install the library using one of these commands:

$ npm i react-pagination-bar

# or

$ yarn add react-pagination-bar

Usage

To start using the library, add import Pagination and place the component in your code. If you are not going to customize the styles of the component, don't forget to add the default styles:

import 'react-pagination-bar/dist/index.css'

Simple usage without react-router-dom:

import { Pagination } from "react-pagination-bar"
import 'react-pagination-bar/dist/index.css'

const posts = [
  { id: 1, title: 'Post 1' },
  { id: 2, title: 'Post 2' },
  { id: 3, title: 'Post 3' },
  { id: 4, title: 'Post 4' },
  { id: 5, title: 'Post 5' },
  { id: 6, title: 'Post 6' },
  { id: 7, title: 'Post 7' },
  { id: 8, title: 'Post 8' },
  { id: 9, title: 'Post 9' },
  { id: 10, title: 'Post 10' },
  { id: 11, title: 'Post 11' },
  { id: 12, title: 'Post 12' },
];

export const App = () => {
  const [currentPage, setCurrentPage] = useState(1);
  const pagePostsLimit = 3;

  return (
    <div className="App">
      {posts
        .slice((currentPage - 1) * pagePostsLimit, currentPage * pagePostsLimit)
        .map((post) => <div key={post.id}>{post.title}</div>)}
      <Pagination
        currentPage={currentPage}
        itemsPerPage={pagePostsLimit}
        onPageChange={(pageNumber) => setCurrentPage(pageNumber)}
        totalItems={posts.length}
        pageNeighbours={2}
      />
    </div>
  );
};

Props

Prop name	Type	Default value	Description	Required
totalItems	Number	None	Total number of items on the server.	Yes
onPageChange	((pageNumber: number) => void)	None	Callback triggered on page change.	Yes
currentPage	Number	1	Page number to be shown first. Be sure to synchronize the value with the server if you work with routing!	Yes
itemsPerPage	Number	10	The number of items to display on your page. Be sure to synchronize the value with the server if you work with routing!	Yes
startLabel	String	'<<'	The text of the button that sends to the first page.	No
endLabel	String	'>>'	The text of the button that sends to the last page.	No
prevLabel	String	'<'	The text of the button that sends to the previous page.	No
nextLabel	String	'>'	The text of the button that sends to the next page.	No
pageNeighbours	Number	4	The number of pages displayed next to the currently selected.	No
withProgressBar	Boolean	false	Shows the progress bar under pagination.	No
onlyPageNumbers	Boolean	false	Removes buttons and leaves only pages.	No
onlyPaginationButtons	Boolean	false	Removes pages leaves only buttons.	No
withGoToInput	Boolean	false	Shows the input field to go to the page.	No
customClassNames	Object	*Take a look at the example with component customization*	Replaces default class names.	No

Upgrading from v1 to v2

1. Use currentPage instead initialPage
2. Update your onPageChange to onPageChange (fixed C letter from Cyrillic to Latin)
3. Add itemsPerPage if you haven't already
4. Remove withDebug if you have added it

More examples

Coming soon...

License

MIT © Ilya Sokol