Pagination Component - pagination-ts-js

The pagination-ts-js package is a versatile pagination component for React projects. It offers easy implementation of pagination with features like setting total pages, tracking the current page, and customization options for styling buttons. It's designed to simplify pagination integration while allowing for seamless customization to match your project's design.

Features

• TypeScript Support: Ensures type safety and improved development experience.
• Customization Options: Easily customize styles, button appearance, and add icons for a tailored pagination component.
• Easy Integration: Simple API for seamless integration into React and Next.js projects.
• Total Page Control: Set the total number of pages to accommodate different datasets.
• Current Page Tracking: Tracks the active page for smooth navigation.
• Handle Page Change: Provides a callback function to manage page transitions effortlessly.
• Next.js Compatibility: Compatible with Next.js projects for server-side rendering and static generation.
• Responsive Design: Adapts to various screen sizes for a consistent user experience.
• Accessibility: Prioritizes accessibility standards for inclusivity.
• Extendable: Easily extend functionality or add features as needed.
• Documentation and Support: Comprehensive documentation and community support for effective usage.

These features make pagination-ts-js a valuable tool for implementing pagination in React and Next.js projects, offering flexibility, ease of use, and a seamless user experience.

Installation

To install the Pagination component, you can use npm or yarn:

npm install pagination-ts-js

Or

yarn add pagination-ts-js

Example

import { Pagination } from "pagination-ts-js";
import  { useState } from "react";

const App = () => {
  const [currentPage, setCurrentPage] = useState(1);

  return (
     <Pagination
        totalPage={10}
        currentPage={currentPage}
        handlePageChange={setCurrentPage}
        customStyle=""
        buttonOptions={{
          buttonStyle: "",
          preButton: {
            btnText: "Pre", //default text is "Previous"
           icon: "", //svg component
            textHide: false, // true to hide text
          },
          nextButton: {
            btnText: "Next", //default text is "Next"
            icon: "", //svg component
            textHide: false, // true to hide text
          },
        }}
      />
  );
};

export default App;

Props

The Pagination component accepts the following props:

Name	Type	Description	Default Value
totalPage	number	Total number of pages.	-
currentPage	number	Current active page.	-
handlePageChange	function	Function to handle page change. Accepts a function that sets the current page.	-
customStyle	string	Custom CSS styles for the pagination component.	Empty string ("")
buttonOptions	object	Object containing options for customization of buttons. See below for details.	-

buttonOptions

Name	Type	Description	Default Value
buttonStyle	string	CSS class for styling the buttons.	-
preButton	object	Options for the previous button. See below for details.	-
nextButton	object	Options for the next button. See below for details.	-

preButton and nextButton Options

Name	Type	Description	Default Value
btnText	string	Text to be displayed on the button.	"Previous" for preButton, "Next" for nextButton
icon	element	Icon component to be displayed on the button.	-
textHide	boolean	Determines whether to hide the button text.	false