SweetPagination 🚀

SweetPagination is a lightweight, responsive, and customizable React pagination component. It works seamlessly with React, Next.js, and JavaScript projects. Ideal for tables, lists, data grids, and UI components. Fully responsive, accessible, and easy to integrate.

Features ✨

• Responsive and modern design
• Supports React, Next.js, and plain JavaScript
• Hooks-based component
• Customizable styles or pre-built styles (style-1, style-2)
• Navigation buttons (Previous / Next)
• Supports any number of items and dynamic page counts
• Easy integration with tables, lists, grids, and UI components

Available Pre-Loaded Styles

Installation 📦

Install via npm:

npm i sweetpagination --save

Basic Usage 🔹

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 (
    <div>
      {currentPageData.map((item) => (
        <div key={item}>
          <h3>Item #{item}</h3>
        </div>
      ))}

      <SweetPagination
        currentPageData={setCurrentPageData}
        getData={items}
      />
    </div>
  );
}

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 🔹

<SweetPagination
  currentPageData={setCurrentPageData}
  getData={items}
  dataPerPage={10}
/>

Add Navigation Buttons 🔹

<SweetPagination
  currentPageData={setCurrentPageData}
  getData={items}
  dataPerPage={10}
  navigation={true}
/>

Preloaded Styles 🔹

Available Styles:

1. style-1 – Modern round buttons with hover effects
2. style-2 – Minimal flat design

<SweetPagination
  currentPageData={setCurrentPageData}
  getData={items}
  dataPerPage={10}
  navigation={true}
  getStyle={'style-1'}
/>

Custom Style 🔹

You can also create your own custom style:

<SweetPagination
  currentPageData={setCurrentPageData}
  getData={items}
  dataPerPage={10}
  navigation={true}
  getStyle={'style-custom'}
/>

Add your custom 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);
}

Responsive Design 📱

SweetPagination automatically adjusts for mobile devices. Works on all screen sizes, from desktop to mobile.

Examples 💡

• Table Pagination: Perfect for large data tables
• List Pagination: Paginate any list of items
• Grid Pagination: Works seamlessly with UI grids
• Infinite Scroll Integration: Can be combined with infinite scroll logic

SEO & Accessibility 🔹

• Fully keyboard navigable
• Compatible with screen readers
• Lightweight & optimized for performance
• Works with React, Next.js, JavaScript, TypeScript

License

MIT © Jahidul Islam Zim All rights reserved.

✅ Why SweetPagination?

• Easy to integrate
• Modern and eye-catching design
• Fully responsive & accessible
• Works with any data source or UI component