RPB Logo

React Pagination Bar

Lightweight component for pagination of application pages on react

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 ?

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 - 1) * pagePostsLimit + pagePostsLimit
        )
        .map((post) => {
          return <div key={post.id}>{post.title}</div>;
        })}
      <Pagination
        initialPage={currentPage}
        itemPerPage={pagePostsLimit}
        onChangePage={(pageNumber) => setCurrentPage(pageNumber)}
        totalItems={posts.length}
        pageNeighbours={2}
      />
    </div>
  );
};

More examples

Coming soon…

License

MIT © Ilya Sokol

GitHub

View Github