ShakibDShy

Installation

How to install and set up React Pagination Pro in your project

Installation

Get started with React Pagination Pro by following these simple steps:

Install the package

Choose your preferred package manager:

npm install @shakibdshy/react-pagination-pro
# or
yarn add @shakibdshy/react-pagination-pro
# or
pnpm add @shakibdshy/react-pagination-pro
# or
bun add @shakibdshy/react-pagination-pro

Import the component

Import the components in your React application:

import { Pagination } from '@shakibdshy/react-pagination-pro';

Setup Tailwind CSS

import themePlugin from "@shakibdshy/tailwind-theme";
 
/** @type {import('tailwindcss').Config} */
export default {
  content: [
    // ... your content configuration
    "node_modules/@shakibdshy/tailwind-theme/dist/**/*.{js,ts,jsx,tsx}",
  ],
  plugins: [
    themePlugin,
    // ... other plugins
  ],
};

Basic usage

Here's a simple example to get you started:

function App() {
  return (
    <Pagination
      totalItems={100}
      defaultPageSize={10}
      onChange={({ currentPage, pageSize }) => {
        // Handle page change
      }}
    />
  );
}

What's included?

Pagination Component

The main pagination component with support for controlled and uncontrolled modes

usePagination Hook

A custom hook for advanced pagination state management

Built-in Styles

Pre-built styles with Tailwind CSS support and custom CSS options

Requirements

  • React 18+ (for Hooks support)
  • TypeScript 5.0+ (for type definitions)
  • Tailwind CSS 3.0+ (optional, for default styling)
  • PostCSS 8.0+ (optional, for Tailwind CSS support)

Last updated on

Next

Pagination

On this page