Simple React Pagination Component – Sweet Pagination

ReactJS has been a popular front-end framework for writing modularized applications. Pagination is one problem in particular that comes with modularizing React applications. A pagination can be implemented using many different approaches, but I thought it would be nice to have a neat react component that provides pagination out of the box. This will make the development process fluid while shielding you from many possible implementation details.

Sweet Pagination is a simple pagination component with a few helpful features. The library works out of the box and there are no complex configurations. Further customizations will be easy if you know how to add styles for a React component.

How to use it:

1. Install and import the pagination component.

import React, { useState } from "react";
import SweetPagination from "sweetpagination";

2. Render a basic pagination control for your large data.

function Items() {
  const [currentPageData, setCurrentPageData] = useState(new Array(2).fill());
  // Example items, to simulate fetching from another resources.
  const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
  return (
    <div>
      {currentPageData.map((item) => (
        <div>
          <h3>Item #{item}</h3>
        </div>
      ))}
      <SweetPagination
        currentPageData={setCurrentPageData}
        getData={items}
        navigation={true}
        dataPerPage={10}
        getStyle={'my-style'}
      />
    </div>
  );
}

Preview:

Download Details:

Author: jahidulislamzim

Live Demo: View The Demo

Download Link: Download The Source Code

Official Website: https://github.com/jahidulislamzim/sweetpagination

License: MIT