Description:
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:
