React Pagination Bar

Default

1
2
3
4
5
<Pagination
  totalItems={500}
  itemsPerPage={4}
  onPageСhange={(pageNumber) => console.log(pageNumber)}
/>

With progress bar

1
2
3
4
5
6
<Pagination
  totalItems={500}
  itemsPerPage={4}
  withProgressBar={true}
  onPageСhange={(pageNumber) => console.log(pageNumber)}
/>

Only pages numbers

1
2
3
4
5
6
<Pagination
  totalItems={500}
  itemsPerPage={4}
  onlyPageNumbers={true}
  onPageСhange={(pageNumber) => console.log(pageNumber)}
/>

Custom labels

1
2
3
4
5
6
7
8
9
<Pagination 
  totalItems={500}
  itemsPerPage={4}
  onPageСhange={(pageNumber) => console.log(pageNumber)}
  startLabel={'<<'}
  endLabel={'>>'}
  nextLabel={'>'}
  prevLabel={'<'}
/>

Custom page neighbours

1
2
3
4
5
6
<Pagination 
  totalItems={500}
  itemsPerPage={4}
  onPageСhange={(pageNumber) => console.log(pageNumber)}
  pageNeighbours={1}
/>

With input

1
2
3
4
5
6
<Pagination 
  totalItems={500}
  itemsPerPage={4}
  onPageСhange={(pageNumber) => console.log(pageNumber)}
  withGoToInput={true}
/>

With custom class names

1
2
3
4
5
6
7
8
9
10
11
12
13
<Pagination 
  totalItems={500}
  itemsPerPage={4}
  onPageСhange={(pageNumber) => console.log(pageNumber)}
  customClassNames={{
    rpbItemClassName:'custom-item',
    rpbItemClassNameActive:'custom-item--active',
    rpbGoItemClassName: 'custom-go-item',
    rpbItemClassNameDisable: 'custom-item--disable', 
    rpbProgressClassName: 'custom-progress-bar',
    rpbRootClassName: 'custom-root',
  }}
/>