SweetPagination is a lightweight, responsive, and customizable React pagination component library. Works seamlessly with React, Next.js, and JavaScript projects. Ideal for tables, lists, data grids, and UI components. Supports hooks, modern design, and fu
npm install sweetpaginationstyle-1, style-2)
bash
npm i sweetpagination --save
`
---
Basic Usage 🔹
`javascript
import React, { useState } from "react";
import SweetPagination from "sweetpagination";
function Items() {
const [currentPageData, setCurrentPageData] = useState([]);
const items = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14];
return (
{currentPageData.map((item) => (
Item #{item}
))}
currentPageData={setCurrentPageData}
getData={items}
/>
);
}
`
---
Props & Customization 🎨
| Prop | Type | Default | Description |
| ----------------- | -------- | --------- | --------------------------------------------------------- |
| dataPerPage | Number | 10 | Number of items per page |
| getData | Array | \[] | Array of data to paginate |
| currentPageData | Function | - | Callback function to get current page data |
| navigation | Boolean | true | Show Previous/Next navigation buttons |
| getStyle | String | 'style-1' | Preloaded styles: style-1, style-2, or style-custom |
---
Change Items Per Page 🔹
`javascript
currentPageData={setCurrentPageData}
getData={items}
dataPerPage={10}
/>
`
---
Add Navigation Buttons 🔹
`javascript
currentPageData={setCurrentPageData}
getData={items}
dataPerPage={10}
navigation={true}
/>
`
---
Preloaded Styles 🔹
$3
1. style-1 – Modern round buttons with hover effects
2. style-2 – Minimal flat design
`javascript
currentPageData={setCurrentPageData}
getData={items}
dataPerPage={10}
navigation={true}
getStyle={'style-1'}
/>
`
---
Custom Style 🔹
You can also create your own custom style:
`javascript
currentPageData={setCurrentPageData}
getData={items}
dataPerPage={10}
navigation={true}
getStyle={'style-custom'}
/>
`
Add your custom CSS:
`css
.style-custom {
background-color: #4caf50;
color: white;
border-radius: 12px;
transition: all 0.3s ease;
}
.style-custom:hover {
background-color: #45a049;
transform: scale(1.05);
}
``