Responsive pagination component for React.

Usage no npm install needed!

<script type="module">
  import unleashitPagination from 'https://cdn.skypack.dev/@unleashit/pagination';



NPM npm (scoped) npm bundle size

Responsive pagination component for React in Typescript. Just give it a total, current offset and handler and it returns the new offset as needed

pagination component


npm install @unleashit/pagination

Required peer dependency: react


import React from 'react';
import Pagination from '@unleashit/pagination';
import { getData } from 'dataService';

export class PaginationDemo extends React.Component {
  constructor(props) {

    this.state = {
      offset: 0,
      data: null
    this.perPage = 10;

    this.paginationHandler = this.paginationHandler.bind(this);

  async componentDidMount() {
    const data = await getData();
    setState({ data });

  getCurrentPage() {
    const { data, offset } = this.state;
    return data.slice(offset, offset + this.perPage);

  paginationHandler(newOffset) {
    this.setState({ offset: newOffset });

  render() {
    const { data } = this.state;
    if (!data) return <div>Loading...</div>;
    if (!data.length) return <div>No items found.</div>;

    return (
        <ItemList data={this.getCurrentPage()} />


Basic namespaced (BEM) css can be imported: import '@unleashit/pagination/dist/pagination.css'. CSS Module support is baked in. If you use CSS Modules you can import styles from '@unleashit/pagination/dist/pagination.module.css' or import your own custom module targeting the internal classes and pass to the cssModuleStyles prop. Please see CSS in the main readme of the repo for more info.


Name Type Description default
perPage Number Number of items per page 10
currentOffset Number Current offset of the list 0 (required)
total Number Total number of items 0 (required)
paginationHandler Function The method to call when a page or prev/next button is clicked. Provides the next offset as an argument. required
prevLabel String Label for previous button 'prev'
nextLabel String Label for next button 'next'