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

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