React-pagination-bar NPM

Content

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

Upgrading from v1 to v2

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