CG-Pagination

A simple and versatile pagination library for managing paginated data, along with a React component for easy integration into any React project.

Features

• Basic pagination logic
• Next and previous page functionality
• First and last page functionality
• Current page tracking
• Get all pages at once
• React component for displaying and navigating paginated data

Installation

Install the library using npm:

npm install cg-pagination

Usage

Using Pagination Logic

• You can use the pagination logic independently of the React component.

const { Pagination } = require('cg-pagination');

const data = Array.from({ length: 100 }, (_, i) => i + 1);
const pagination = new Pagination(data, 10);

console.log(pagination.getPage(1)); // [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
console.log(pagination.getNextPage()); // [11, 12, 13, 14, 15, 16, 17, 18, 19, 20]

Using the React Component

• Import and use the PaginationComponent in your React project.

import React from 'react';
import { PaginationComponent } from 'cg-pagination';

const App = () => {
    const data = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);

    return (
        <div className="App">
            <h1>Pagination Example</h1>
            <PaginationComponent data={data} pageSize={10} />
        </div>
    );
};

export default App;

Props

• The PaginationComponent accepts the following props:

• data (required): An array of data items to paginate.

• pageSize (optional): The number of items per page. Default is 10.

Example

• Here’s a full example of using the PaginationComponent in a React app.

import React from 'react';
import { PaginationComponent } from 'cg-pagination';

const App = () => {
    const data = Array.from({ length: 100 }, (_, i) => `Item ${i + 1}`);

    return (
        <div className="App">
            <h1>Pagination Example</h1>
            <PaginationComponent data={data} pageSize={10} />
        </div>
    );
};

export default App;

Development

Build

• To build the library, use the following command:

npm run build

Test

• To run tests, use the following command:

npm test

License

• This project is licensed under the MIT License. See the LICENSE file for details.

Author

Chandan Gupta - Software Developer